Create second level dropdown using css

Question

I am trying to create a second level dropdown. I successfully created first level dropdown but bit stuck in making it level 2. Please assist me to complete it..

and also please explain me what mistake I am doing that I cant get the second level dropdown even the css part is good (I think so)

EDIT: I know there are many tutorials on dropdown css. But I want to know why this is not working.

Here is the link to jsbin

HTML

<ul id="nav">
  <li>Home</li>
  <li>Details
    <ul id="subNav">
    <li>x details<li>
      <li>y details</li>
    </ul></li>

  <li>About Us
    <ul id="xSubNav">
      <li>About company
        <ul>
          <li>full information</li>
          <li>summary</li>
        </ul></li>
      <li>About Author</li>
    </ul></li>
</ul>

CSS

*{font-family:consolas;}

li{line-height:20px;}

ul#nav>li{float:left;width:100px;list-style:none;
          cursor:hand;cursor:pointer;}

ul#nav li li
{display:none;width:150px;}

ul#nav li ul
{padding:0;margin:0;}

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

ul#nav>li:hover{color:grey;}

ul li li{color:black;}

ul li li:hover
{color:cornflowerblue;}

ul li li:hover li   /* level 2 dropdown part */
{display:block;margin-left:150px;width:300px;}

Mr_Green · Accepted Answer · 2012-12-13 07:44:49Z

2

Here is solution with your code

Just add the below css:

ul ul li { position:relative;}
ul ul li ul { position:absolute; display:none; left:0px; top:0px;}
ul ul li:hover ul { display:block;}
ul#nav li li li {display:block;}

Check this working fiddle

edited Dec 13, 2012 at 7:44

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

answered Dec 13, 2012 at 7:38

Monkviper

1,5172 gold badges11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrian Ber · Accepted Answer · 2012-12-13 07:24:27Z

1

The problem is the specificity of CSS rules. Just add #nav to the last three rules, to not get overridden by the first ones.

ul#nav li li{color:black;}

ul#nav li li:hover
{color:cornflowerblue;}

ul#nav li li:hover li
{display:block;margin-left:150px;width:300px;}

And I think some other tuning is needed, but that's the idea.

answered Dec 13, 2012 at 7:24

Adrian Ber

21.5k12 gold badges72 silver badges122 bronze badges

1 Comment

Mr_Green Over a year ago

yup, working.. Thanks for the explanation.. Anyway to remove the space between the li when hovered for second level dropdown?

Collectives™ on Stack Overflow

Create second level dropdown using css

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related