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.

I can solve the issue but you have written inline css so its taking time — w3uiguru
– w3uiguru, Commented Dec 15, 2012 at 8:53

w3uiguru · Accepted Answer · 2012-12-15 09:39:02Z

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:

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

edited Dec 15, 2012 at 9:39

answered Dec 15, 2012 at 9:13

w3uiguru

5,9152 gold badges24 silver badges25 bronze badges

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

7 Comments

w3uiguru Over a year ago

ya sure i m removing html from here but will keep css other wise stackoverflow will not allow to save just only fiddle.

w3uiguru Over a year ago

glad to help your problem. If any thing else required you can ask. If my answer is right please mark it right. Thnks

Mr_Green Over a year ago

+1 one small problem.. the element a is not stretching as the li is.. I mean a should cover li.

w3uiguru Over a year ago

see the updated fiddle : jsfiddle.net/dineshswami/4pLt3/3 still any changes required?

w3uiguru Over a year ago

Or you mean to say the the <a> tag should cover entire <li> tag space?

|

Srihari Goud · Accepted Answer · 2012-12-15 09:34:28Z

0

Change top and left properties to adjust I have edited jsdin

edited Dec 15, 2012 at 9:34

answered Dec 15, 2012 at 9:23

Srihari Goud

85011 silver badges25 bronze badges

Collectives™ on Stack Overflow

css dropdown menu

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related