Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
98 lines (97 sloc) 2.02 KB
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>RockFest</title>
<style>
*{
margin:0;
padding:0;
}
#wrapper{
width:960px;
margin:0 auto;
}
nav{
margin:20px 0;
background-color: #333;
height: 35px;
font-family:Helvetica, Arial,Verdana,sans-serif;
font-size:1em;
}
nav li{
list-style:none;
float:left;
margin-right:20px;
position:relative;
}
nav a{
display:block;
padding:10px;
color:#fff;
background:#333;
text-decoration:none;
height: 15px;
}
nav a:hover{
background:#ccc;
}
nav li a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
/*--- DROPDOWN ---*/
nav li ul{
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
nav li li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<ul>
<li>
<a href="#" title="Return home">Home</a>
</li>
<li>
<a href="#"title="lineup">lineup</a>
<ul>
<li><a href="#">Artists</a></li>
<li><a href="#">Schedule</a></li>
</ul>
</li>
<li>
<a href="#">Info</a>
<ul>
<li><a href="#">Hotels</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Attractions</a></li>
<li><a href="#">Food</a></li>
</ul>
</li>
<li>
<a href="#">Media</a>
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Press releases</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href="#">Phone and email</a></li>
<li><a href="#">Directions</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>