I have been working on this toolbar for months. It looks good on one computer, but then I go to another computer with a different screen width and the toolbar is "squashed." Because it is "squashed" it appears as a toolbar, and then the excess toolbar appears beneath of it....a continuation, if you know what I mean. Anyway, I want it to appear the same on all computers--to be the full width of the page without overflowing.
This is the CSS code:
Code:
#cssm1 * { padding:0; margin: 0; font: 1em arial; }
#cssm1 { position: absolute; z-index: 99; margin: 0 auto; align: center; line-height: 20px; }
#cssm1 a { display: block; border: 1px solid #fff; color: #ffffff; background: #008000; text-decoration: none; padding: 3px 10px; }
#cssm1 a:hover { background: #006400; }
#cssm1 ul li, #cssm1 ul li ul li { width: 157px; list-style-type:none; }
#cssm1 ul li { float: left; width: 157px; overflow: hidden; }
#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 157px;
}
#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul {
display:block;
}
#cssm1:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 157px;
margin-top: -20px;
}
You can view the website here:
http://www.horselover.net16.net