Page is a not externally linkable
rocknbil - 8:20 pm on Jan 6, 2010 (gmt 0)
[edited by: alt131 at 8:28 pm (utc) on Jan 24, 2012]
Well, there's a couple things going on, you'll need to resolve these first. The link sent via PM doesn't work at all in FireFox (no drop down menus at all) but I think I might know why.
I don't have your images so I substituted background colors in the code below. First problem is this:
<ul>
<li><a href="#" class="topnav">Members</a></li>
<ul>
You have the ul "bare" between <li>'s, which is invalid and is probably why it's broken in FF. You need to nest that <ul> inside the <li>, like
<ul>
<li><a href="#" class="topnav">Members</a>
<ul>
<!-- the other li's for the nested URL -->
</ul>
</li>
Note how the first li "encapsulates" the nested li.
This, of course, changes everything. :-) you'll now need to modify your selectors like so:
.menu ul ul li{ <-- ul ul invalid
.menu ul li ul li{
.menu ul ul li a{ <-- ul ul invalid
.menu ul li ul li a{
.menu ul ul li a:hover{ <-- ul ul invalid
.menu ul li ul li a:hover{
As for the disappearing BG, you just need to add the :link selector:
.menu ul li a.topnav:link,.menu ul li a.topnav:hover, .menu ul li a.topnav:active {
/*background:url(images/tab-bg.png) 19px 0 no-repeat;*/
background:#ff0000; /*red */
}
I say "changes everything" because after making these changes it may not be the layout you expect, but here is what I have. It's definately hosed up in FF, the sub-menus are flowing down to the next lines.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#nav{
width:995px;
height:113px;
margin:0 auto;
/*background:#fff url(images/nav-bg.jpg) 0 0 no-repeat;*/
background:#c0c0c0; /*gray*/
font-family: Arial, sans-serif;
}
.menu {
width:740px;
margin-top:41px;
height:43px;
}
.menu ul {
width:100%;
}
.menu ul li {
width:185px;
float:left;
position:relative;
}
.menu ul li a.topnav:link, .menu ul li a.topnav:visited{
display:block;
height:43px;
width:184px;
color:#000;
text-align:center;
}
.menu ul li a.topnav:link,.menu ul li a.topnav:hover,
.menu ul li a.topnav:active {
/*background:url(images/tab-bg.png) 19px 0 no-repeat;*/
background:#ff0000; /*red */
}
.menu ul li ul {
visibility:hidden;
width:467px;
height:122px;
background:#0068b3;
padding:10px;
position:relative;
left:19px;
}
.menu ul li ul li{
width:155px;
height:40px;
float:left;
margin:0 1px 1px 0;
padding:0;
}
.menu ul li ul li a{
color:#fff;
text-decoration:underline;
font-size:13px;
font-weight:bold;
padding:15px 0 0 9px;
width:146px;
height:25px;
/*background:#1375bc url(images/arrow-off.png) 2px 17px no-repeat;*/
background:#e1ffe1; /*green */
display:block;
}
.menu ul li ul li a:hover{
color:#0068b3;
text-decoration:none;
/*background:#fff url(images/arrow-on.png) 0 0 no-repeat;*/
background:#d7ebff; /*lt blue */
}
.menu ul li:hover ul, .menu ul li a:hover ul{
visibility:visible;
}
</style>
</head>
<body>
<div id="nav">
<div class="menu">
<ul>
<li><a href="#" class="topnav">Members</a>
<ul>
<li><a href="#">Health Insurance</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">Discount Services</a></li>
<li><a href="#">Dental Insurance</a></li>
<li><a href="#">Decision Support</a></li>
<li><a href="#">Health Library</a></li>
<li><a href="#">Medicare Insurance</a></li>
<li><a href="#">Wellness Support</a></li>
<li><a href="#">Disease Management</a></li>
</ul>
</li> <!-- note the nesting changes, so do your selectors -->
<li><a href="#" class="topnav">Brokers</a></li>
<li><a href="#" class="topnav">Employers</a></li>
<li><a href="#" class="topnav">Providers</a></li>
</ul>
</div>
</div><!--/nav-->
</body>
</html>
[edit reason] Side Scroll [/edit]