Grow your CSS skills. Land your dream job.

CSS Menu drop down problem

  • # June 10, 2009 at 8:32 pm

    Greetings,
    I can’t make my drop down menu items line up vertical? I have tried using display: block; on all elements but no joy.
    So for example, under the menu heading ‘About TCA’, TCA Board should be on a new line. Also, I can’t get the 2nd level menu item text to line up to the left with the 1st level menu item text.
    Any help would be much appreciated! Thanks.
    Link to site – http://www.tenkile.com/new/test.html
    CSS –

    Code:
    /* Menu 2 */
    #menu2{ width: 1000px; height:40px; position: relative; background: #000000 url(images/bg_menu_2.jpg); }
    #menu2 ul{ font: bolder 13px Arial, Helvetica, sans-serif; list-style: none; color: #ffffff; }
    #menu2 li { display: inline; text-decoration: none; font-weight: bold; }
    #menu2 li a:visited { text-decoration: none; color: #FFFFFF; font-weight: bold;}
    #menu2 li a:link { text-decoration: none; color: #FFFFFF; font-weight: bold; }
    #menu2 li a:hover { color: #9ade4a; font-weight: bolder; text-decoration: none; }

    #nav2 li { /* all list items */
    float: left;
    margin: 0 0 0 20px;

    }

    #nav2 a { display: block; }

    #nav2 li ul { /* second-level lists */ position: absolute; background: #6D0101; width: 150px; left: -999em; /* using left instead of display to hide menus because display: none isn’t read by screen readers */ top: 33px; }

    #nav2 li:hover ul, #nav2 li.sfhover ul { /* lists nested under hovered list items */ left: auto; padding: 0; margin-left:-6px; }
    #nav2 li:hover a { /* lists nested under hovered list items */ padding: 0 0 5px 0; }

    .menuarrow{ margin: 15px 0 0 0; border:none;}

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".