css dropdown menu

Question

I am trying to create level 2 drop-drop down. I came bit close and stucked. Please assist me to complete it.

Here is the JsBin

 li{list-style:none;line-height:30px;}
 a{text-decoration:none;color:#c3c3c3;font-family:consolas;width:100%;}
 a:hover{color:white;}

 li{padding:5px;background-color:#5970B2;}

 /*li*/a:hover{background-color:grey;}
 ul#sddm{position:relative;}

 ul#sddm ul{display:none;}

 ul#sddm>li{float:left;}

 ul#sddm>li:hover>ul 
 {white-space: nowrap;display:block;position:absolute;margin:0;padding:0;}


 ul#sddm ul li:hover ul
 {white-space: nowrap;display:block;margin-left:150px;
   position:absolute;margin-top:0;padding:0;}

 ul#sddm ul li:hover ul>li{}

It will be good for me, if someone explain what I was doing wrong..

Thanks in advance.

Answer 1

Here is the fiddle for demo http://jsfiddle.net/dineshswami/4pLt3/1/

Changes in css:

a{text-decoration:none;color:#c3c3c3;font-family:consolas; display:block;padding:2px;}

ul#sddm>li{float:left; position:relative;}

ul#sddm ul li:hover ul{white-space: nowrap;display:block;margin-left:150px;position:absolute;margin-top:0;padding:0;left:-2px;margin-top:-39px;}

Changes in html: I removed inline css

Problem: The problem was you was forcing the elements by giving inline css so they was not align properly where they want to be. Little changes in position where you mention absolute. So i change the left and top value you can see in css above.

As i mentioned the problem above, let me explain in detail:

1. To expand the the <a> tag to the entire width of <li> tag i just removed the css width: 100%; and add new css rules display:block;padding:2px;

2. To adjust the first drop down width i removed the entire inline css from html. so all elements are able to take entire width on basis of text.

3. To adjust the second level drop down i set the top and left properties to left:-2px;margin-top:-39px; Why i did this because there was a gap between in first level drop down and second level and margin-top to -39px because you have given line-height:30px; which is increasing the height so i have set the margin-top.

Answer 2

Change top and left properties to adjust I have edited jsdin