CSS Drop downs with dynamic width sub-menus

Posted on 2007-07-23
Last Modified: 2012-05-05

i'm trying to create a drop down menu using CSS... well, not create one but tweak one of the fine ones already available....

the one i'm currently trying to work with can be found here...

my problem is that in this menu system , and with an Adobe Spry menu system in DW CS3 which uses a similar <li> system to set up data, is that the sub-levels always seem to be of the same size... if the text in the menu overuns this size all kinds of weirdness start happening (eg it goes to 2 lines and covers the menu underneath etc)... i can provide examples if that would help...

so basically i'd like to find a CSS based dropdown menu where the data is in a nice to understand format (eg. HTML lists) but where the submenus' width expands according to the size of the text contained...

for reference the reason i need this is that i'd like to create a dynamic drop down which will take its info from a database... and you never know how much text is going to end up in one of these menus...


Question by:dog_star
    LVL 12

    Expert Comment

    Hello dog_star,

    I do not know if it is 'deep' enough for your needs (& assuming you did not notice ti), there is a variable width css drop down menu at cssplay...

    I hope this helps!



    Author Comment

    well, i did miss that and it will come in handy in some sites i build, but i really need sub-menus too....

    nice find though :)
    LVL 9

    Accepted Solution

    There's one here,  List-Based Dhtml Menu.  I did not study it in depth, but I was able to add a really long menu item.

    Author Comment

    thanks for the link trinzia but unfortunatly this appears to use a complex javascript for the data....

     what i need is something CSS based so the menu data is simply structured, within list items for example...
    LVL 9

    Expert Comment

    That one does use list items.

    Author Comment

    trinzi, apologies, you are totally correct.... i was looking at the wrong menu (they really have a lot of menus there!)...

    that looks just what i need... now to try it out to see if it does fit my needs....

    thanks both for your help


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now