#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    1
    Rep Power
    0

    Drop down menu width adjustment


    Hi, I'm very new, so please be gentle.

    I don't know much about CSS but have been trying to make a drop down menu for my website. I managed to find the basics of what I wanted on a CSS site and know enough to have been able to tweak it (almost) to my requirements.

    My problem is that the dropdown column widths are set and ideally I'd like them to adjust according to the amount of text which is to be displayed (I hope I'm making sense here), but I don't know how. I tried setting the width to automatic, but all that did was give me a huge column the width of my screen!

    I've pasted the code and wonder if anyone would be good enough to tell me if it's possible to do what I want and if it is, could you point me in the right direction please?

    Many thanks,

    Alison

    .preload1 {background: url(three_1.gif);}
    .preload2 {background: url(three_1a.gif);}

    #nav {padding:0; margin:0; list-style:none; height:38px; background:#ffffff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

    #nav li.top {display:block; float:left; height:38px;}

    #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ffffff; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}

    #nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}

    #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

    #nav li:hover a.top_link {color:#6c3600; background: url(three_1.gif) no-repeat;}

    #nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}

    #nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}

    /* Default list styling */

    #nav li:hover {position:relative; z-index:200;}

    #nav li:hover ul.sub
    {left:1px; top:38px; background: #FE9A2E; padding:5px; border:1px solid #fe9a2e; white-space:nowrap; width:145px; height:auto; z-index:300;}

    #nav li:hover ul.sub li
    {display:block; height:20px; position:relative; float:left; width:145px; font-weight:normal;}

    #nav li:hover ul.sub li a
    {display:block; font-size:12px; height:18px; width:145px; line-height:18px; text-indent:5px; color:#FFFFFF; text-decoration:none;border:1px solid #fe9a2e;}

    #nav li ul.sub li a.fly
    {background:#FE9A2E url(arrow_over.gif) 135px 6px no-repeat;}

    #nav li:hover ul.sub li a:hover
    {background:#F5D0A9; color:#6C3600; border-color:#ffffff;}

    #nav li:hover ul.sub li a.fly:hover
    {background:#F5D0A9 url(arrow_over.gif) 135px 6px no-repeat; color:#6C3600;}

    #nav li b {display:block; font-size:15px; height:18px; width:225px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

    #nav li:hover li:hover ul,
    #nav li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover li:hover ul
    {left:145px; top:-4px; background: #fe9a2e; padding:3px; border:1px solid #F5D0A9; white-space:nowrap; width:225px; z-index:400; height:auto;}

    #nav ul,
    #nav li:hover ul ul,
    #nav li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

    #nav li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover li:hover a.fly
    {background:#F5D0A9 url(arrow_over.gif) 130px 6px no-repeat; color:#6c3600; border-color:#fe9a2e;}

    #nav li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li:hover li a.fly
    {background:#fe9a2e url(arrow_over.gif) 130px 6px no-repeat; color:#FFFFFF; border-color:#fe9a2e;}
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    You could try checking out this link...http://www.sitepoint.com/article/exp...ts-css-layout/

    This would also be absurdely easy with tables.

    Basically, if you choose to use divs, you would need to use JavaScript to calculate their widths after the layout/content is determined.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR

IMN logo majestic logo threadwatch logo seochat tools logo