CSS Menu with Sub Menus

[DDmUSA]

I am using a CSS-based glossy menu that I found on Dynamic Drive. Using Internet Explorer 7, the sub-menus appear towards the right once the mouse is pointing over the top level. Using Firefox, all of the sub-menus appear all at once as a bulleted and indented list. Is there any way to have Firefox appear identical to Internet Explorer 7? Perhaps this has something to do with Firefox not supporting li:hover... I do not know... just a thought?????

CSS code is as follows:

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid black;
}

.glossymenu li{
position: relative;
left: 12;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 240px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1; list-style-type:none
}

.glossymenu li a{
background: white url('glossyback.gif') repeat-x bottom left;
color: white;
display: block;
width: auto;
padding-left: 3px;
text-decoration: none; font-style:normal; font-variant:normal; font-weight:bold; font-size:10px; font-family:Verdana, Helvetica, sans-serif; list-style-type:none; padding-right:0; padding-top:6px; padding-bottom:6px
}

.glossymenu .arrowdiv{
position: absolute;
right: 1px;
font: bold 12px Verdana, Helvetica, sans-serif;
background: transparent url("arrow.gif") no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url("glossyback2.gif");
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */


JAVASCRIPT code is as follows:

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-12 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="&nbsp;&nbsp;"
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function (){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoff set+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}


if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)


HTML code for menu list is as follows:

<li>&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.swazilandembassyus.com/">
Home</a></li>
<li><a href="http://www.swazilandembassyus.com/welcome.htm">Ambassador's Welcome</a></li>


<li><a>About Swaziland</a></li>
<ul>
<li><a href="http://www.swazilandembassyus.com/people.htm">People</a></li>
<li><a href="http://www.swazilandembassyus.com/geography.htm">Geography</a></li>
<li><a href="http://www.swazilandembassyus.com/economy.htm">Economy</a></li>
<li><a href="http://www.swazilandembassyus.com/government.htm">Government</a></li>
<li><a href="http://www.swazilandembassyus.com/relations.htm">Foreign Relations</a></li>
</ul>

<li><a>About the Embassy</a></li>
<ul>
<li><a href="http://www.swazilandembassyus.com/bio.htm">Ambassador's Biography</a></li>
<li><a href="http://www.swazilandembassyus.com/mission.htm">Mission Statement</a></li>
<li><a href="http://www.swazilandembassyus.com/staff.htm">Embassy Staff</a></li>
<li><a href="http://www.swazilandembassyus.com/holidays.htm">Holidays</a></li>
<li><a href="http://www.swazilandembassyus.com/events.htm">Events and Announcements</a></li>
</ul>

<li>
<a>The King's Office</a></li>
<ul>
<li><a href="http://www.swazilandembassyus.com/royal_family.htm">History of The Royal Swazi Family</a></li>
<li><a href="http://www.swazilandembassyus.com/king.htm">King Mswati III: Biographical Sketch</a></li>
<li><a href="http://www.swazilandembassyus.com/cabinet.htm">His Majesty's Cabinet</a></li>
</ul>

<li><a>Contact the Embassy</a></li>
<li><a>Consular Details</a></li>
<ul>
<li><a href="http://www.swazilandembassyus.com/consular.htm">Visa Information</a></li>
<li><a href="http://www.swazilandembassyus.com/consular_usa.htm">For U.S. Nationals</a></li>
<li><a href="http://www.swazilandembassyus.com/consular_health.htm">Health Concerns</a></li>
</ul>

<li><a href="http://www.swazilandembassyus.com/news.htm">News</a></li>

<li><a>Links</a></li>
<ul>
<li><a href="http://www.swazilandembassyus.com/links_embassies.htm">Embassies</a></li>
<li><a href="http://www.swazilandembassyus.com/links_general.htm">General Information</a></li>
<li><a href="http://www.swazilandembassyus.com/links_health.htm">Health Care</a></li>
<li><a href="http://www.swazilandembassyus.com/links_media.htm">Media</a></li>
<li><a href="http://www.swazilandembassyus.com/links_tourism.htm">Tourism</a></li>
<li><a href="http://www.swazilandembassyus.com/links_trade.htm">Trade and Investment</a></li>
</ul>
</td>

[drhowarddrfine]

Perhaps this has something to do with Firefox not supporting li:hover

It is IE6 that doesn't support li:hover. Firefox has always supported it.

It is difficult to cut/paste your code into something to play with. Do you have a link?

The bullets and indents showing in FF tell me the bullets are probably in IE, too, but are probably hidden behind another element.

[DDmUSA]

It is IE6 that doesn't support li:hover. Firefox has always supported it.

It is difficult to cut/paste your code into something to play with. Do you have a link?

The bullets and indents showing in FF tell me the bullets are probably in IE, too, but are probably hidden behind another element.

The link to the active website is: http://swazilandembassyus.com

[DDmUSA]

I presume there is no way to make Firefox appear similar to Internet Explorer 7 in this example.

Please advise...

[drhowarddrfine]

I'm having trouble figuring out the hover effect and am wondering if it is controlled by the javascript. IE and FF handle margins and padding differently on lists. It's a problem with IEs handling of the box model. One uses margin to display the bullets while the other uses padding.

Another possible cause of this problem is that IE is in quirks mode. You need a proper doctype to keep IE in line with modern browsers, such as Firefox. See the sticky at the top of this board.

Then validate your html and CSS to fix the errors there. But I'm still thinking it's related to margins/padding and, perhaps, javascript; so you might inquire over at the js board about that until I can find more time to look into this.

With all the bugs in IE7, it is better to get this working correctly in FF first, then adjust for IEs quirks and errors.