Menu
Hi, I have a navigation bar nested inside <nav> element. [HTML5].
I’m running into a trouble and this is what i expect.
[ATTACH]15873[/ATTACH]
But I’m getting this.
[ATTACH]15875[/ATTACH]
Html file’s here.
[CODE]
<!DOCTYPE html>
<html>
<head>
<title>Gaurab Parajuli Webpage</title>
<style type=”text/css”>
#Container {
width: 960px;
margin: auto;
}
header {
height: 120px;
width: 960px;
background-color: grey;
}
header nav {
background-color: #98bf21;
width: 960px;
height: 20px;
}
header nav ul {
list-style-type: none;
}
header nav ul li{
float: left;
}
header nav ul li a:link, header nav ul li a:visited {
text-decoration: none;
color: #ffffff;
background-color: #98bf21;
text-transform: uppercase;
font-weight: lighter;
padding: 10px;
}
header nav ul li a:hover,header nav ul li a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<div id=”Container”>
<header>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Softwares</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>About Me</a></li>
<li><a href=”#”>Contact Me</a></li>
</ul>
</nav>
</header>
<section>
<h1 id=”Welcome”>Welcome to my website</h1>
<p>A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog.</p>
</section>
<aside>
<h2 class=”Sidebar-title”>This is a side bar</h2>
<p>A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog. A quick brown fox jumps over a lazy dog.</p>
</aside>
<footer>
<p>Copyright Gaurab Parajuli 2013</p>
</footer>
</div>
</body>
</html>
Also explain what you did.