CSS Dropdown Menu

• Home
• 
  

  Abou Us

  • History
  • Our Vision
• 
  

  Product

  • Product 1
  • 
    

    Product 2

    • Sub Product 2.1
    • 
      

      Sub Product 2.2

      • Sub Product 2.2.1
      • Sub Product 2.2.2
      • Sub Product 2.2.3
      • Sub Product 2.2.4
      • Sub Product 2.2.5
    • Sub Product 2.3
    • 
      

      Sub Product 2.4

      • Sub Product 2.4.1
      • Sub Product 2.4.2
      • Sub Product 2.4.3
      • Sub Product 2.4.4
    • Sub Product 2.5
    • Sub Product 2.6
    • 
      

      Sub Product 2.7

      • Sub Product 2.7.1
      • Sub Product 2.7.2
      • Sub Product 2.7.3
    • Sub Product 2.8
  • Product 3
  • Product 4
  • Product 5
  • Product 6
• Gallery
• 
  

  News

  • Breaking News
  • Sport News
  • Music News
  • Movie News

Code

menu.css

/*---- show/hide sub menu ----*/

.menu ul ul{display:none;}

.menu ul li:hover ul,

.menu ul ul li:hover ul,

.menu ul ul ul li:hover ul,

.menu ul ul ul ul li:hover ul,

.menu ul ul ul ul ul li:hover ul{

display:block;

}

.menu ul:hover ul ul,

.menu ul ul:hover ul ul,

.menu ul ul ul:hover ul ul,

.menu ul ul ul ul:hover ul ul{

display:none;

}

/*---- styling menu menu ----*/

.menu ul{margin:0;padding:0;font-size:12px;}

.menu ul li{position:relative;float:left;display:inline-block;list-style:none;background:#ccc;cursor:pointer;border-left:1px solid #999;font-weight:bold;}

.menu ul li:first-child{border:none;}

.menu ul li span,.menu ul li a{display:block;}

.menu ul li span{background:url(images/nav-arrow-down.png)no-repeat right;padding: 5px 20px 5px 10px;}

.menu ul li a{text-decoration:none;color:#000;padding:5px 10px;}

.menu ul ul{position:absolute;left:0;top:25px;border-right:1px solid #D3D3D3;}

.menu ul ul li{position:relative;width:150px;display:block;background:#E8E8E8;border:none;border-top:1px dotted #B7B7B7;;font-weight:normal;}

.menu ul ul li span{background:url(images/nav-arrow-right.png)no-repeat right;padding: 5px 20px 5px 10px;}

.menu ul ul ul{left:150px;top:0;}

.menu ul li:hover{background:#E8E8E8;}

.menu ul ul li:hover{background:#ddd;}

Sample Menu

menu.html

<div class="menu">

    <ul>

        <li><a href="">Home</a></li>

        <li>

            <span>Abou Us</span>

            <ul>

                <li><a href="">History</a></li>

                <li><a href="">Our Vision</a></li>

            </ul>

        </li>

        <li>

            <span>Product</span>

            <ul>

                <li><a href="">Product 1</a></li>

                <li><a href="">Product 2</a></li>

                <li><a href="">Product 3</a></li>

                <li><a href="">Product 4</a></li>

                <li><a href="">Product 5</a></li>

                <li><a href="">Product 6</a></li>

            </ul>

        </li>

        <li><a href="">Gallery</a></li>

        <li>

            <span>News</span>

            <ul>

                <li><a href="">Breaking News</a></li>

                <li><a href="">Sport News</a></li>

                <li><a href="">Music News</a></li>

                <li><a href="">Movie News</a></li>

            </ul>

        </li>

    </ul>

</div>

Download Link

http://www.4shared.com/zip/85FxmYQr/css_dropdown_menu.html

Posted in: css, html