I'm working on a website for work, so unfortunately I can't actually show it to you as of now. However, I hope I can describe my problem to a sufficient degree for you to understand what I'm trying to achieve. I have a navigation bar structured as a nested UL. So I have a block "DIV" element containing an inline "UL" that contains "A" elements in the form of "LI"s. Those "LI"s in turn contain other "UL"s as submenus, and this is where I'm encountering problems. I have styled the first level "LI"s to float to the left, giving me a nice and horizontal menu with a set maximum height. Then, as I click the links the site naturally opens sub-pages and displays the contained submenu "UL" and it's own "LI"s. The problem is this. Because the submenus are "UL"s contained within the "LI"s of the main menu, the parent "LI" will stretch in order to contain the submenu "UL". Is there any way I can maintain the structure of the main menu, and avoid the other main menu "LI"s to float right. In other words; I want the submenu "UL" to display smoothly at the next line below the main menu "LI"s without rearranging the structure of the main menu "UL". I'm considering going with "nth-child" selectors for the main menu "LI"s, but as this is away off from having full browser support as of yet, I am reluctant to do so. Therefore, I'm hoping the collective genius and vast repository of accumulated knowledge within bit-tech might shed light on what I, as of yet, am unable to see. Thanks for all your input.
Hey. What you're trying to do sounds familiar. I've had issues like that before as well, and then just decided to ditch the effort. There's a good example of something similar (if I am right) Here, though that uses jQuery as well. The idea then (and IMHO the easier way of handling it) is to make the LI's contain DIV's. These div's can be hidden using "display:none;". then use jQuery to show them on hover.
Hm, that is interesting and I'm kicking myself for not thinking about it myself. However, I've been trying to avoid javascript in one form or another as much as possible, but I will mess around with it for a bit and see how it ties in with rest of the layout. Thanks.
jQuery is awesome. The main strength lies in its ability to manipulate CSS at runtime (there's other strengths, but that's the most used one). it's also cross-browser compatible, and small. I am pretty sure I saw something like dropdown menus in pure CSS3, but you're likely to pick up more compatibility issues with CSS3 than with Javascript.
Journeyer - got a link to view your current effort? I am pritty sure this can be done purely in CSS without the need for JQuery. It would just be easyer to play/wdit/work with what you already have than trying to visulize it in my head.
When in need of nested lists via CSS I always refer to Listamatic2.. http://css.maxdesign.com.au/listamatic2/horizontal04.htm
Nice link - added to my favourites now. Always good to get useful reference sites no matter how experienced one thinks one is!!
Yep JQuery makes it super easy to implement, but with the advent of modern browsers and add ons for them like NoScript and AdBlock some JQuery objects may not display correctly or at all if the user has such add ons installed and active. Plus; I find it that if it can be done with plain html+css it's better to have done that way.
Thank you, that is awesome and exactly what I need. Now I just need to adapt the code to my site. Excellent! I know. I quite like working with javascripts (haven't messed around with jQuery that much to be honest), but this time we would have liked to avoid it as much as possible. I am aware of the compatibility issues with many CSS3 functions, so I'm trying to avoid implementing too many of those as well. Luckily I can justify using some of the new functions as the page will look a little prettier in FF or Safari (or even IE9), but users of older of other browsers will see something functional, albeit less made up. Sadly I can't link to it as it is not ready to be published, and as this is for work - and because we are fairly careful about our public profile - I will need to finish it and have the whole thing approved for publication before making it public. Yes, I too were sure it could be done purely in CSS, but racking my brain for hours whilst tweaking and fiddling with it, trying to figure out exactly how to do it, left me bewildered. So I turned to the aid of bit-techers which have never let me down in the past, and hey presto; an answer has been presented. Thank you all for your contributions. I am sorry for the delayed answer, but I had to attend a funeral this weekend so I was unable to view the replies to this thread until now.
