How to Create a Drop Down Menu only using CSS – Without JavaScript
Here is the Html Code. If you have ever created a horizontal menu this code should be quite familiar. Only think which may not be know to you is right at the bottom of the post.
<html>
<head>
<link type="text/css" href="test.css" rel="stylesheet" />
</head>
<body>
<div id="navsite">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Team</a></li>
<li><a href="#">Projects</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Here is the CSS code.
a{
text-shadow:0 -1px 0px rgba(0,0,0,.4);
font-weight:bold;
}
#navsite{
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:1.1em;
font-weight:bold;
border-right:1px solid #666;
padding: 0;
margin-bottom:1em;
color:#333;
width:auto;
}
#navsite ul{
list-style: none;
margin:0;
padding:0;
}
#navsite> ul>li{
margin:0;
border-top:1px solid #003;
float:left;
}
#navsite ul li a:link, #navsite ul li a:visited{
display:block;
padding:4px 4px 4px 0.5em;
border-left:10px solid #369;
border-right:1px solid #69c;
border-bottom:1px solid #369;
color:#E5DEAC;
text-decoration:none;
background-color:#495961;
background-position:50%;
}
html>body #navsite ul li a{
width:auto;
}
#navsite ul li a:hover{
border-left:10px solid #036;
border-right:1px solid #69c;
border-bottom:1px solid #369;
background-color:#69f;
color:#fff;
}
#navsite ul ul li a:link, #navsite ul ul li a:visited{
border-left: 10px solid #69c;
border-right: 1px solid #9cF;
border-bottom:1px solid #69c;
background-color:#888;
}
#navsite ul li a:hover, #navsite ul ul li a:hover{
border-left:10px solid #036;
border-right:1px solid #69c;
border-bottom:1px solid #369;
background-color: #69f;
color:#fff;
}
#navsite ul ul{
background0color:white;
margin-left:10px;
}
/*This is the trick that make it a dropdown menu*/
/*initially positioned outside the screen*/
ul li ul{
position:absolute;
left:-999em;
}
/*bring it to the screen*/
#navsite ul li:hover ul{
left:auto;
}
}
