Forum Moderators: not2easy
I've been reading the forums already on this topic, and I'm still banging my head on the table!
I have a serious problem with my menu. I've uploaded my website over the weekend to a website to test it and check that everything is how I wanted it. Well, following some issues, my menu has decided to stop working. I have no idea why!
I've been using the Son of Suckerfish dropdown menu, and here lies the problem. It is working fine in IE(!) and not at all in firefox. It is not "dropping down" in firefox and is just displaying as a solid block. If I take the background colour off then it just displays the writing.
I have posted the relevant code below:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").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>
<style type="text/css">
#nav {
padding:0;
margin:0;
list-style-type: none;
line-height: 30px;
position: relative;
top:110px;
left: 400px;
width: 800px;
height:30px;
border: solid #0000FF 1px;
background-color: #6666FF;
text-align: center;
z-index:5;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
font-family: Verdana, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color:#9999ff;
line-height: 30px;
white-space: normal;
display: inline;
width:100px;
}
#nav a {
display: block;
width: 10em;
text-decoration: none;
font-family: Verdana, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color:#6666ff;
line-height: 30px;
list-style: none;
}
#nav a:hover {
background-color: #9999FF;
color: #FFFFFF;
}
#nav li {
float: left;
width: 10em;
margin:0;
padding:0;
}
#nav li ul {
position: relative;
width: 10em;
left: -999em;
margin:0;
padding:0;
}
#nav li:hover ul {
left: auto;
background-color: #9999FF;
color: #000000;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
background-color: #9999FF;
color: #000000;
}
</style>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="parish.php">Our Parish</a>
<ul>
<li><a href="mass.php">Mass Times</a></li>
<li><a href="newsletters.php">Newsletters</a></li>
<li><a href="out.php">Kid's Corner</a></li>
<li><a href="photos.php">Photo Gallery</a></li>
<li><a href="social.php">Social Events</a></li>
<li><a href="lourdes.php">Lourdes Pilgrimage</a></li>
<li><a href="groups.php">Groups</a></li>
</ul>
</li>
<li><a href="about.php">About Us</a>
<ul>
<li><a href="sacraments.php">Sacraments</a></li>
<li><a href="out.php">Calendars</a></li>
<li><a href="finance.php">Finance</a></li>
<li><a href="forms.php">Forms</a></li>
<li><a href="ghana.php">Ghana</a></li>
<li><a href="history.php">History</a></li>
<li><a href="privacy.php">Privacy Policy</a></li>
<li><a href="links.php">Related Links</a></li>
</ul>
</li>
<li><a href="cont.php">Contact Us</a>
<ul>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="directions.php">Directions</a></li>
<li><a href="out.php">Hall Hire</a></li>
</ul>
</li>
</ul>
I really hope someone might be able to help me with this problem. I just don't know what else to fiddle with!
Thanks in advance!
first, nothing to do with your problem, but you can remove this rule:
#nav li:hover ul {
left: auto;
background-color: #9999FF;
color: #000000;
}
It's duplicated by the one below it..
To Fix your menu, first change the positioning of the child UL to absolute..
#nav li ul {
/*position: relative; remove this */
position: absolute; /* add this */
width: 10em;
left: -999em;
margin:0;
padding: 0;
}
Unfortunately that invokes a little IE quirk, where when it brings the dropdowns back into view "auto" will position the child menus to the center of the parent. who knows, but text align center is the cause so if you remove
text-align: center;#nav {..} #nav a {..}HTH
