Friday, 15 August 2014

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;
}


No comments:

Post a Comment

Alternative content