469,326 Members | 1,193 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,326 developers. It's quick & easy.

CSS Menu with Sub Menus

3
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>
Mar 7 '07 #1
4 4980
drhowarddrfine
7,435 Expert 4TB
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.
Mar 7 '07 #2
DDmUSA
3
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
Mar 7 '07 #3
DDmUSA
3
I presume there is no way to make Firefox appear similar to Internet Explorer 7 in this example.

Please advise...
Mar 12 '07 #4
drhowarddrfine
7,435 Expert 4TB
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.
Mar 12 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by johkar | last post: by
2 posts views Thread by Jackson Yap | last post: by
16 posts views Thread by Jay | last post: by
6 posts views Thread by daniel.sumanth | last post: by
2 posts views Thread by Dave Taylor | last post: by
2 posts views Thread by Gary Wessle | last post: by
7 posts views Thread by Mel | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.