I have a simple menu that does drop down on hover, but only one level. The sub’s then spread horizontally.

So: menu item | menu item | menu item
|
sub item – sub-item – sub-item

Whereas I want: menu item | menu item | menu item
|
sub
sub
sub

This is the relevant code:

/* MENU */  .topnavigationgroup {     margin: 0px; 	padding-right: 40px; } .topnavigationgroup ul {     width: 100%;     float: left;     margin: 0;     padding: 0;     list-style: none; } .topnavigationgroup ul li:last-child a{border-right:1px solid #F5DC32;} .topnavigationgroup li {     float: left;     color: #FFF;     font-size: 12px;     font-family: Arial, Helvetica, Verdana, sans-serif; } .topnavigationgroup li a {     display: block;     padding: 2px 10px;     text-decoration: none;     color: #FFF;     border-left: 1px solid #F5DC32; } .topnavigationgroup li a:hover {     color: #FFF;     background-color: #259999; } .page_item {     text-decoration:none;     display: block;     color: #FFFFFF;     background-color: #3f6997; } .current_page_item { 	background-color: #FF6E3D; }

Any help is greatly appreciated.