I am trying to create a cascading menu with CSS. It works fine in IE, but in FF the background doesn't show up.
#nav, #nav ul {
font-weight: bold;
font-size: 10pt;
line-height: 1;
font-family: Tahoma, Arial, Verdana, Helvetica, "Sans Serif";
text-decoration: none;
background-color: #483d8b;
list-style-type: none;
margin: 0;
padding: 0;
border-style: solid;
border-width: 1px 0 1px 0;
border-color: #ffffff;
width: 100%; }
#nav a {
color: #ffffff;
text-decoration: none;
padding: 1;
width: 9.6em;
w\idth: 7.9;
display: block }
#nav li {float: left; width: 9.6em }
#nav li ul {
font-weight: normal;
background-color: #483d8b;
margin: 0;
border: solid 1px white;
position: absolute;
left: -999em;
width: auto;
w\idth: 6em }
#nav li ul ul { margin: -1em 0 0 10em }
#nav li:hover ul ul, #nav li.sfhover ul ul { text-decoration: underline;
left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { color: white;
text-decoration: underline;
left: auto; }
#nav li a:hover, #nav li a.sfhover { color: #c5c5d4;
text-decoration: underline; }
Does anyone know why it does this?Add units to all no zero values, i.e. padding: 1px ;
If it's still no working give a link or full code.Here's the full source code. The adding units thing didn't work out too well.... and the html?Oh, ok. Sorry I took so long, I was on vacation. Here's the HTML for the menu...
<ul id="nav" align="center">
<div align="left">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://cityofpoulsbo.com">Home</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Departments</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">City Clerk</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Planning & Building</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Finance</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Municipal Court</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Police</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Parks & Recreation</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Public Works</a>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">City Council</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Boards/Commissions</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Adjustments/Appeals</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Civil Service</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Community Police Advisory</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Design Review</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Parks/Recreation</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Planning</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Poulsbo Public Library</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tree Board</a>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Meeting Minutes</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Council Calendar</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Job Opportunities</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Council Members</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Municipal Code</a>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Quicklinks</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Engineering</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Utility Billing</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Trash Pickup</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Recycling</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Parks & Rec Classes</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Budget Info</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Taxes</a>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">About Poulsbo</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Addresses</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Staff Directory</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Bug Form</a>
</ul>
</li></div>
</ul>
There's also a small script involved, to make the thing work in IE. I don't think I put that in the first file either.
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Thank you for all your help with this!Add a background color:
#nav li {
float: left;
width: 9.6em;
background: #483d8b;
}OK thanks. I did that, and now there IS a background color to it. Which is a major step forward. But...now it's still wigging out, just in a different way. The only thing that works is the "Departments" heading, and that only if you hold the mouse a certain way over it. The other top level items don't work. That is, their dropdowns don't drop down. Once again, let me show you what I have.
<style type="text/css"><!--#nav, #nav ul
{font-weight: bold; font-size: 10pt;
line-height: 1;
font-family: Tahoma, Arial, Verdana, Helvetica, "Sans Serif";
text-decoration: none;
background-color: #483d8b;
list-style-type: none;
margin: 0;
padding: 0;
border-style: solid;
border-width: 1px 0 1px 0;
border-color: #ffffff;
z-index: 100;
width: 100% }
#nav a {
color: #ffffff;
text-decoration: none;
padding: 1;
width: 9.6em;
w\idth: 7.9;
display: block }
#nav li {
float: left;
width: 9.6em;
background: #483d8b;
}
#nav li ul {
position:absolute;
width:auto;
w\idth:6em;
left:-999em;
font-weight:normal;
margin:0;
border:solid 1px white;
background-color:#483d8b;}
#nav li ul ul { margin: -1em 0 0 10em; }
#nav li:hover ul ul, #nav li.sfhover ul ul
{text-decoration: underline;
left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { color: white;
text-decoration: underline;
left: auto; }
#nav li a:hover, #nav li a.sfhover { color: #c5c5d4;
text-decoration: underline; }
--></style>
I've attached a sample of the page if that will help, also.Change this:
#mid {
/* position:relative; remove */
margin-left:150px;
}
The original menu was designed to work in strict mode, you are in quirks mode.
You can not 'dump' bits of css, html or JavaScript in to an existing page and expect it to work.
Start with content in html, then add css and finally the JavaScript.
<!-- m --><a class="postlink" href="http://www.maxdesign.com.au/presentation/checklist.cfmThank">http://www.maxdesign.com.au/presentatio ... t.cfmThank</a><!-- m --> you. I had figured out that it was the #mid part that was causing trouble, I just didn't know how to fix it without ruining my layout. Works now!
#nav, #nav ul {
font-weight: bold;
font-size: 10pt;
line-height: 1;
font-family: Tahoma, Arial, Verdana, Helvetica, "Sans Serif";
text-decoration: none;
background-color: #483d8b;
list-style-type: none;
margin: 0;
padding: 0;
border-style: solid;
border-width: 1px 0 1px 0;
border-color: #ffffff;
width: 100%; }
#nav a {
color: #ffffff;
text-decoration: none;
padding: 1;
width: 9.6em;
w\idth: 7.9;
display: block }
#nav li {float: left; width: 9.6em }
#nav li ul {
font-weight: normal;
background-color: #483d8b;
margin: 0;
border: solid 1px white;
position: absolute;
left: -999em;
width: auto;
w\idth: 6em }
#nav li ul ul { margin: -1em 0 0 10em }
#nav li:hover ul ul, #nav li.sfhover ul ul { text-decoration: underline;
left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { color: white;
text-decoration: underline;
left: auto; }
#nav li a:hover, #nav li a.sfhover { color: #c5c5d4;
text-decoration: underline; }
Does anyone know why it does this?Add units to all no zero values, i.e. padding: 1px ;
If it's still no working give a link or full code.Here's the full source code. The adding units thing didn't work out too well.... and the html?Oh, ok. Sorry I took so long, I was on vacation. Here's the HTML for the menu...
<ul id="nav" align="center">
<div align="left">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://cityofpoulsbo.com">Home</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Departments</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">City Clerk</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Planning & Building</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Finance</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Municipal Court</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Police</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Parks & Recreation</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Public Works</a>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">City Council</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Boards/Commissions</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Adjustments/Appeals</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Civil Service</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Community Police Advisory</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Design Review</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Parks/Recreation</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Planning</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Poulsbo Public Library</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tree Board</a>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Meeting Minutes</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Council Calendar</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Job Opportunities</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Council Members</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Municipal Code</a>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Quicklinks</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Engineering</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Utility Billing</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Trash Pickup</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Recycling</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Parks & Rec Classes</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Budget Info</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Taxes</a>
</ul>
</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">About Poulsbo</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Addresses</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Staff Directory</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Bug Form</a>
</ul>
</li></div>
</ul>
There's also a small script involved, to make the thing work in IE. I don't think I put that in the first file either.
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Thank you for all your help with this!Add a background color:
#nav li {
float: left;
width: 9.6em;
background: #483d8b;
}OK thanks. I did that, and now there IS a background color to it. Which is a major step forward. But...now it's still wigging out, just in a different way. The only thing that works is the "Departments" heading, and that only if you hold the mouse a certain way over it. The other top level items don't work. That is, their dropdowns don't drop down. Once again, let me show you what I have.
<style type="text/css"><!--#nav, #nav ul
{font-weight: bold; font-size: 10pt;
line-height: 1;
font-family: Tahoma, Arial, Verdana, Helvetica, "Sans Serif";
text-decoration: none;
background-color: #483d8b;
list-style-type: none;
margin: 0;
padding: 0;
border-style: solid;
border-width: 1px 0 1px 0;
border-color: #ffffff;
z-index: 100;
width: 100% }
#nav a {
color: #ffffff;
text-decoration: none;
padding: 1;
width: 9.6em;
w\idth: 7.9;
display: block }
#nav li {
float: left;
width: 9.6em;
background: #483d8b;
}
#nav li ul {
position:absolute;
width:auto;
w\idth:6em;
left:-999em;
font-weight:normal;
margin:0;
border:solid 1px white;
background-color:#483d8b;}
#nav li ul ul { margin: -1em 0 0 10em; }
#nav li:hover ul ul, #nav li.sfhover ul ul
{text-decoration: underline;
left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { color: white;
text-decoration: underline;
left: auto; }
#nav li a:hover, #nav li a.sfhover { color: #c5c5d4;
text-decoration: underline; }
--></style>
I've attached a sample of the page if that will help, also.Change this:
#mid {
/* position:relative; remove */
margin-left:150px;
}
The original menu was designed to work in strict mode, you are in quirks mode.
You can not 'dump' bits of css, html or JavaScript in to an existing page and expect it to work.
Start with content in html, then add css and finally the JavaScript.
<!-- m --><a class="postlink" href="http://www.maxdesign.com.au/presentation/checklist.cfmThank">http://www.maxdesign.com.au/presentatio ... t.cfmThank</a><!-- m --> you. I had figured out that it was the #mid part that was causing trouble, I just didn't know how to fix it without ruining my layout. Works now!