Simple CSS Drop Down Menu
---------- HTML -------------
<ul class="navbar navbar-bg container" id="menu">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a>
<ul class="sub-menu">
<li><a href="#">About Company</a></li>
<li><a href="#">Sonny Siato</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a>
<ul class="sub-menu">
<li><a href="#">Current Blogs</a></li>
<li><a href="#">Press Release</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
---------- CSS -------------
/**DROP DOWN**/
/*Initialize*/
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}/*sub menu*/
ul#menu li ul.sub-menu {
display: none;
left: 0;
padding-top: 10px;
position: absolute;
width: 100px;
z-index: 9;
}
ul#menu li:hover ul.sub-menu, ul#menu li ul.sub-menu:hover {
display:block;
}
<ul class="navbar navbar-bg container" id="menu">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a>
<ul class="sub-menu">
<li><a href="#">About Company</a></li>
<li><a href="#">Sonny Siato</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a>
<ul class="sub-menu">
<li><a href="#">Current Blogs</a></li>
<li><a href="#">Press Release</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
---------- CSS -------------
/**DROP DOWN**/
/*Initialize*/
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}/*sub menu*/
ul#menu li ul.sub-menu {
display: none;
left: 0;
padding-top: 10px;
position: absolute;
width: 100px;
z-index: 9;
}
ul#menu li:hover ul.sub-menu, ul#menu li ul.sub-menu:hover {
display:block;
}
Comments
Post a Comment