Problem: Spry Horizontal Menu straddles header
I created a new page using
"1 column elastic, centered, header and footer"
I add a Spry Horizontal Menu within the "header" div.
The menu does not display entirely within the grey header
area.
The menu straddles half in the header and half below the
header.
I believe this is because of the float i.e.
"ul.MenuBarHorizontal li" has "float: left;".
How do I make the menu stay entirely within the grey header
content area?
Thanks ahead of time.
************************
<div id="header">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href="#">People</a></li>
</ul>
</div>
.oneColElsCtrHdr #header {
background: #DDDDDD;
padding: 10px;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
}