fixing the width of the drop down menu

  • Author
  • #1205992


    I want the width of the items in the drop down menu to be exactly the same is whatever is on the top. I changed the width to 126 px, which works well for my “In the Kitchen” tab.

    The problem, however, is that it only looks perfectly aligned when you’re in Firefox. In Explorer the alignment is a little off (see screen shot link below). And then I realized that it only works for “In the Kitchen” – if I decide to make “Meet the Chef” a dropdown it probably won’t line up at all.

    THEN I realized it only looks good with the particular font I’m using. Once I try to change the font, everything looks messed up.

    So what code should I use so that the width of the menu item is automatically the same as whatever is on top of the list? (I tried “auto” but that didn’t work.

    Thanks in advance!

    Screen shot:

    The blog I need help with is


    Each browser renders text and things differently and it also depends on what font the browser decides to use. Themes are always designed with “font stacks” (multiple similar fonts) so that if a visitor’s computer does not have the primary font, the browser will use the second, or the third if the second isn’t available, and on down the list. When it gets to the end and none of the fonts are available, it will substitute whatever it things is close (standard serif or sans-serif).

    What you have to do is set a width for ALL menu li elements, and that can be somewhat messy since that means that the width of “home” will be the same as the width of “In the Kitchen”, which means your entire menu ends up getting very wide with lots of space between in some instances, and not so much between in other instances.

    You could specifically target menu items by ID number, but this can fall apart depending on browser used, and the font that ends up being used by the browser.



    Hi. Setting the width of the dropdown menu to 100% should achieve your desired effect. Add the following to your CSS:

    #access ul li:hover > ul {
    width: 100%;
    overflow: hidden;

    @siobhyb, interesting solution and one I’ll have to study a little. The only issue I see is that the grey background on the submenu items does not go the full width (background declared in the “a” rather than in the li). This fixes that issue, but I’m reluctant to suggest going with a width that is over 100% (bit of a “hack”).

    #access ul ul a {
    width: 108%;


    Thanks guys!!! I put siobhyb’s code and it seemed to work perfectly. tsp, that last bit of code didn’t seem to change anything appearance wise, so I left it out. I saw the problem you were talking about though, and after some trial and error I added “width: 100%” as shown below, and I THINK that might have fixed it.

    #access ul ul a {
    background: #666;
    color: #fff;
    border-top: 2px solid white;
    line-height: 1em;
    padding: 10px;
    width: 100%;
    height: auto;

    I do have a related question, though. The font I really want for the menu is Microsoft Yi Baiti, 25 pt. I put in a bunch of other options in case someone doesn’t have that font, but my last two options, verdana and helvetica, are REALLY big when they’re at 25 point. How do I specify my font preference as being “Microsoft Yi Baiti, 25 pt., Verdana 15 pt.,” etc.?

    Again, thank you both so much!



    lol nevermind what i said about “100%”. It was 108% as you said.

    BUT i still do have that question about the fonts, thanks!!

The topic ‘fixing the width of the drop down menu’ is closed to new replies.