Simple CSS Drop Down Menu
This is a very simple CSS Drop Down Menu. This is a pure and Simple CSS Drop Down Menu, no download is required as no images or scripts is used. Simply copy and paste the HTML and CSS code to run this menu on you site or project. You can use the CSS as external stylesheet or as internal stylesheet, its totally up to you.
HTML Code
<ul><li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Linux</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Web Designing</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
CSS Code
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #787878;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
border-radius:5px;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li a {
font: bold 12px/18px sans-serif;
text-decoration:none;
color:#000;display:
inline-block;
}
ul li a:hover {color:#FFF;}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li a {color: #fff;}
ul li ul li:hover { background: #666; color:#000;}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Preview
Simple CSS Drop Down Menu
Live Preview
0 Comments