CODEWITHSUNDEEP
css
Peter
Peter

Reputation: 1541

CSS the third level menu

I am missing something to implement a third level css menu,

My html is

<div class="menu">
 <ul>
  <li class="two"><a href="#" class="title"><span class="icon_has_child">Browse Products</span></a>
   <ul id="two_menu">
    <li><a href="#">Brand Directory</a>
     <ul>
      <li><a href="#">New Brand Directory 1</a></li>
      <li><a href="#">New Brand Directory 2</a></li>
     </ul>
    </li>
    <li><a href="#">Store Directory</a></li>
    <li><a href="#">New Arrival</a></li>
   </ul>
  </li>
 </ul>
</div>

and the css is

.menu li.two{position:relative;}
.menu li.two #two_menu{ display:none;}
.menu li.two:hover #two_menu{ display:block;}

.menu li.two ul { width:190px; position:absolute; left:0; top:39px; padding-bottom:8px;}
.menu li.two ul li {background:none; float:none;}
.menu li.two ul li a { background:none; color:#606060; padding-left:31px; display:block;}
.menu li.two ul li a:hover { color:#f5f3f4; font-weight:bold; background-color:#001991;}

.menu li.two ul li ul { width:190px; position:absolute; left:191px; top:0px;  padding-bottom:8px;}

You may see the testing site here http://goo.gl/jZ3v0 (On the top menu click "Browse Products")

How do I when hover "brand directory" only show "new brand directory"?

Upvotes: 0

Views: 172

Answers (3)

Edper
Edper

Reputation: 9322

Try to add:

.menu li.two ul li ul li {display:none;}

after

.menu li.two ul li a { background:none; color:#606060; padding-left:31px; display:block;}

Upvotes: 0

Ganesh Rengarajan
Ganesh Rengarajan

Reputation: 2006

Try this order it will help you.. DEMO

DIV 

<div class="menu">
    <nav>
 <ul>
  <li class="two"><a href="#" class="title"><span class="icon_has_child">Browse Products</span></a>
   <ul id="two_menu">
    <li><a href="#">Brand Directory</a>
     <ul>
      <li><a href="#">New Brand Directory 1</a></li>
      <li><a href="#">New Brand Directory 2</a></li>
     </ul>
    </li>
    <li><a href="#">Store Directory</a></li>
    <li><a href="#">New Arrival</a></li>
   </ul>
  </li>
 </ul>
    </nav>
</div>

CSS

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    ;
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block; padding: 25px 40px;
            color: #757575; text-decoration: none;
        }


    nav ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none; 
            border-top: 1px solid #6b727c;
            border-bottom: 1px solid #575f6a; position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }   
                nav ul ul li a:hover {
                    background: #4b545f;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

Upvotes: 0

omma2289
omma2289

Reputation: 54619

One way to do this would be to hide all third level menus initially and then display them on hover of the parent li:

.menu ul ul ul {
    display: none;
}

.menu li:hover > ul{
    display: block;
}

Upvotes: 1

Related Questions