I'm pushed for time today so can't get into each thread as much I would like.
Anyway, I suggest (as have a couple of others), that you use a list for your menu buttons.
Put the buttons into a list:
<ul>
<li><img src="whatever location" /></li>
<li>another img</li>
<li>another </li>
</ul>
If you want the list to pop up/flyout, make the html like this.
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
see how one list is inside the other?
then use this as your css.
body {
font-family: arial, helvetica, serif;
margin : 0;
}
#mainDD {
font-family : "Arial", verdana, sans-serif, helvetica;
background-color : #940031;
width : 100%;
height : 25px;
text-align : left;
font-size : 0.9em;
}
#mainnav, #mainnav ul { /* all lists */
padding : 3px 3px 3px;
margin : 0;
list-style: none;
line-height: 25px;
color: #eeeeee;
}
#mainnav a {
display: block;
width: 10em;
color : #aaaaaa;
}
#mainnav a:link, #mainnav a:visited, #mainnav a:active, #mainnav a:hover {
color : #cccccc;
text-decoration : none;
background : #940031;
width : 100%;
border : 2px solid #7a0029;
border-bottom : 0;
display : block;
}
#mainnav li { /* all list items */
float: left;
width: 7em; /* width needed or else Opera goes nuts */
padding : 5px 25px 0 0;
}
*mainnav li {
position : absolute;
left : 0px;
top : 0px;
margin-left : 0px;
}
#mainnav li ul { /* second-level lists */
position: absolute;
line-height : 20px;
width: 7em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background : #940031;
padding-bottom : 100px;
}
#mainnav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 7em;
left : -999em;
background : #940031;
}
#mainnav li:hover ul ul, #mainnav li:hover ul ul ul, #mainnav li:hover ul ul ul ul, #mainnav li:hover ul ul ul ul ul, #mainnav li:hover ul ul ul ul ul ul, #mainnav li.sfhover ul ul, #mainnav li.sfhover ul ul ul, #mainnav li.sfhover ul ul ul ul, #mainnav li.sfhover ul ul ul ul ul, #mainnav li.sfhover ul ul ul ul ul ul {
left: -999em; /* added by me */
min-width : 150px;
min-height : 400px;
background : transparent;
height : 400px;
}
/*html*/ #mainnav li:hover ul ul, #mainnav li:hover ul ul ul, #mainnav li:hover ul ul ul ul, #mainnav li:hover ul ul ul ul ul, #mainnav li:hover ul ul ul ul ul ul, #mainnav li.sfhover ul ul, #mainnav li.sfhover ul ul ul, #mainnav li.sfhover ul ul ul ul, #mainnav li.sfhover ul ul ul ul ul, #mainnav li.sfhover ul ul ul ul ul ul {
margin-left : 125px;
top : 50px;
}
#mainnav li, #mainnav li.sfhover {
padding : 0px 25px 0 0px;
}
#mainnav li:hover ul, #mainnav li li:hover ul, #mainnav li li li:hover ul, #mainnav li li li li:hover ul, #mainnav li li li li li:hover ul, #mainnav li li li li li li:hover ul, #mainnav li.sfhover ul, #mainnav li li.sfhover ul, #mainnav li li li.sfhover ul, #mainnav li li li li.sfhover ul, #mainnav li li li li li.sfhover ul, #mainnav li li li li li li.sfhover ul { /* lists nested under hovered list items */
left : auto;
top : 25px;
padding: 0px;
}
#mainnav li a {
background: #940031;
padding: 2px 2px 2px 10px;
font-size : 0.75em;
display : block;
}
#mainnav li li a {
background: #940031;
padding: 2px 10px 2px 15px;
font-size : 0.75em;
display : block;
}
#mainnav li li li li li li a, #mainnav li li li li li li.sfhover a {
background: #940031;
min-width : 200px;
padding: 5px;
display : block;
}
That is the code for many levels of flyouts. I would suggest that you stick it into a separate stylesheet, just for your menu, and then blank out the lines which you think you don't require using the /* comment */ method. Then, if you have accidentally blanked out a line, you won't have lost it completely.
Then to get it to work as a flyout, in IE, (if you need to), you'll need a short bit of JS.
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("mainnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Any questions, just ask.
BTW this isn;t my menu code - it's a derivative of the very effective Suckerfish menu.
Bazz