CSS Menu drop down problem

[davpatdog]

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;}

[Author]

Posts