Create a simple and smooth css dropdown menu with pure css. No javascript required at all. The output of the given code is...
The Css
The Html
<style type="text/css">
body, div, ul, li {
margin: 0;
padding: 0;
}
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.75em;
width: 960px;
margin: 0 auto;
padding: 10px;
background-color: #006666;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
float: left;
width: 100%;
background-color: #d03543;
line-height: 20px;
position:relative;
z-index:100;
}
#nav li {
float: left;
margin: 0 15px 0 10px;
position: relative;
}
#nav a {
display: block;
padding: 7px;
color: #ffffff;
}
#nav a:hover {
background: #3f3f3f;
}
#nav ul {
background: rgba(255,255,255,0);
position: absolute;
left: -9999px;
}
#nav ul li {
padding-top: 1px;
float: none;
}
#nav ul a {
white-space: nowrap;
}
#nav li:hover ul {
left: 0;
}
#nav li:hover a {
background: #3f3f3f;
}
#nav li:hover ul li a:hover {
background: #333333;
}
</style>
The Html
<html>
<body>
<ul id="nav">
<li> <a href="#">Home</a> </li>
<li> <a href="#">About us ▼</a>
<ul>
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
</ul>
</li>
<li> <a href="#">Products ▼</a>
<ul>
<li><a href="#">Mobile phones</a></li>
<li><a href="#">Tablets</a></li>
<li><a href="#">Laptop accessories</a></li>
</ul>
</li>
<li> <a href="#">Contact us</a> </li>
</ul>
</body>
</html>
Posting Komentar