treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

CSS Menu drop down problem

  • davpatdog
    Permalink to comment #
    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 -

    /* 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;}
Add a Comment