Fmdpa Posted March 8, 2011 Share Posted March 8, 2011 CSS dropdown menus are becoming more popular. However, whenever I create them, I must specifically position each one absolutely with custom "top" and "left" values. Is there a way I could dynamically position each dropdown menu?Sample structure (suggested modifications welcome): <ul id="list"> <li>item</li> <li>item</li> <li>item</li> <li class="sublist">item <ul> <li>item</li> <li>item</li> <li>item</li> </ul> </li></ul> #list > li { display:inline; }#list .sublist ul { display:none; position:absolute; }#list .sublist:hover ul { display:block; } Link to comment Share on other sites More sharing options...
ShadowMage Posted March 8, 2011 Share Posted March 8, 2011 If you make each li in the list position: relative you can position sub menus in relation to the li it belongs to. Other than that, I'm not aware of any method that will allow you to nix the absolute positioning. Link to comment Share on other sites More sharing options...
cousineaug Posted March 9, 2011 Share Posted March 9, 2011 CSS dropdown menus are becoming more popular. However, whenever I create them, I must specifically position each one absolutely with custom "top" and "left" values. Is there a way I could dynamically position each dropdown menu?try this#list > li { display:inline; float:left; padding-right:20px;}#list .sublist ul { display:none; position:absolute; }#list .sublist:hover ul { display:block; } float the elements of the main menu left and then they need some padding to separatethen your submenu appears underneath the proper element, the nested ul will need some formatting to align where you wish but you are half way there.I like your code. it is elegant and has just the basics needed to get things going. it probably gets more complicated if you want to have background colours to the first and second level.Guy Link to comment Share on other sites More sharing options...
cousineaug Posted March 9, 2011 Share Posted March 9, 2011 I had a closer look. Sometimes it is easier to see where things lie with BG colour. <html><head><style type="text/css">#list > li { display:inline; float:left; padding-right:20px;background:#fed;}#list > li ul { display:none; position:absolute; list-style-type:none; padding-left:1px; padding-right:5px; background:#def;}#list >li:hover ul { display:block; }</style></head><body><ul id="list"><li>item one<ul><li>sub item one</li><li>sub item two</li><li>sub item three</li></ul></li><li>item two</li><li>item three</li><li>item four<ul><li>sub item one</li><li>sub item two</li><li>sub item three</li></ul></li></ul></body></html> I got rid of the SUBLIST declaration in favour of just CHILD OF. This allows you to add a submenu without having to change the style of the parent.now for positioning, you just wrap the whole thing in a DIV and place it where you want, relative, float, or absolute.the nested UL needs absolute positioning (I think) only if you apply background colour to avoid bleeding. Try removing absolute from this example. But without BG colour it seems to not affect layout when you remove it.Hope this helps.....Guy Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.