[RESOLVED] CSS menu closes when over content [Archive]

jdg

02-26-2008, 01:48 PM

Hi all,

I have a css suckerfish menu that when it expands and covers the content area, I can see it, but as soon as I move my mouse to the menu and cross what would be the content area border, the menu closes immediately as if I left the menu (although I didn't). Does anyone know why this is happening?

Index page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>


<script type="text/javascript" src="javascript/menu.js"></script>
<script type="text/javascript" src="javascript/search.js"></script>


<link Rel="Stylesheet" Type="Text/css" Href="css/search.css">
<link rel="stylesheet" Type="text/css" Href="css/menu.css">
<link Rel="Stylesheet" Type="Text/css" Href="css/style.css">

</head>

<body class = "menucolor">

<?PHP

# Menu Container
echo "<div id = 'menucontainer'>";
include("menu.php");
echo "</div>";

if(!isset($page))
$page = "welcome.htm";

# Content Container
echo "<div id = 'content'>";
include ("../documents/".$page);
echo "</div>";

?>

</body>
</html>

Menu.php
<ul id="vertnav">
<li><div><a href="#" >first Level menu</a></div>
<ul>
<li><div><a href="#" >second Level menu</a></div></li>
<li><div><a href="#" >second Level menu</a></div>
<ul>
<li><div><a href="#" >third Level menu</a></div></li>
</ul>
</li>
</ul>
</li>
<li><div><a href="#" >Human Resources</a></div>
<ul>
<li><div><a href="#" >fifth Level menu</a></div></li>
<li><div><a href="#" >Attendance & Pay</a></div>
<ul>
<li><div><a href="#" >Compensation Plan</a></div></li>
</ul>
</li>
</ul>
</li>
</ul>

CSS Page:
#vertnav{
padding:0;
margin:0;
list-style: none;
width: 12em;
}
#vertnav li {
margin:0;
position: relative;
width: 12em;
border:solid 1px white;
border-bottom:none;
padding: 0;
background-image: url(../images/menu/button-left.jpg);
background-repeat: no-repeat;
background-position: left center;
}

#vertnav li:last-child{border-bottom:1px solid #CCC;}

#vertnav a {
text-decoration:none;
display:block;
height:2em;
line-height: 2em;
padding: 0.1em;
color: red;
background-image: url(../images/menu/button-right.jpg);
background-repeat: no-repeat;
background-position: right center;
text-align: center;
}
#vertnav li:hover li, #vertnav li.over li,
#vertnav li:hover li li, #vertnav li.over li li {
background-image: url(../images/menu/button-left.jpg);
}
#vertnav li:hover li a, #vertnav li.over li a,
#vertnav li:hover li li a, #vertnav li.over li li a {
background-image: url(../images/menu/button-right.jpg);
color: red;
}
#vertnav li:hover, #vertnav li.over,
#vertnav ul li:hover, #vertnav ul li.over,
#vertnav ul ul li:hover, #vertnav ul ul li.over {
background-image: url(../images/menu/buttonOver-left.jpg);
}
#vertnav li:hover a, #vertnav li.over a,
#vertnav ul li:hover a, #vertnav ul li.over a,
#vertnav ul ul li:hover a, #vertnav ul ul li.over a {
background-image: url(../images/menu/buttonOver-right.jpg);
color: #FFFFFF;
}
#vertnav ul {
list-style: none;
width:12em;
position:absolute;
left: -999em;
top: 0px;
margin: 0;
padding: 0;
}
#vertnav li:hover ul ul, #vertnav li:hover ul ul ul,
#vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul,
#vertnav li.over ul ul, #vertnav li.over ul ul ul,
#vertnav li.over ul ul ul ul, #vertnav li.over ul ul ul ul ul {
left: -999em;
}
#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul,
#vertnav li.over ul, #vertnav ul li.over ul, #vertnav ul ul li.over ul {
left: 12em;
}
* html #vertnav li {
float: left;
}

And the classes and ID's that are used, but are in a different CSS file (a rather large file that I haven't trimmed yet, so here are just the classes I used above):
.menucolor{
Background-Image: url(../Images/index/menubackground.gif);
background-repeat: repeat-y;
}
#menucontainer{
Float: left;
Margin-Left: 4px;
Margin-Top: 130px;
Width: 109px;
}
#content {
Position: absolute;
Top: 90px;
Left: 180px;
Width: 84%;
}