Menu
Hey CSS Gurus,
need some help.
Im planning to use some code for a navbar form this [URL=”http://www.spegele.com/post.php?post_id=79″]site
The issue is if I copy the code from the [URL=”http://www.spegele.com/files/pure_css_dropdown.html”]Live Demo
When I separate the CSS to an external style sheet something breaks. All the submenus display when you hover the mouse over the main top categories instead of displaying on hover over the sub categories.
Any help would be great.
This issus is with Firefox, IE 7 only shows the top nav, no hover or dropdowns.
// External CSS
[CODE]
/* Overarching Menu
———————————–*/
.cssnav {
position:relative;
z-index:1000;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
}
.cssnav ul {
padding:0;
margin:0;
list-style-type:none;
}
.cssnav ul ul {
width:149px;
text-align:left;
}
/* Main list
———————————–*/
.cssnav li {
float:left;
width:150px;
position:relative;
}
/* First Level
———————————–*/
/* Links */
.cssnav a, .cssnav a:visited {
display:block;
text-decoration:none;
color:#fefefe;
border:1px solid #fff;
border-width:1px 0px 1px 1px;
background:#467aa7;
line-height:25px;
}
/* Links on hover */
.cssnav a:hover, .cssnav ul ul a:hover{
color:#fff;
background:#80b0da;
}
.cssnav :hover > a, .cssnav ul ul :hover > a {
color:#fff;
background:#80b0da;
}
/* Second Level
———————————–*/
/* Links */
.cssnav ul ul a, .cssnav ul ul a:visited {
background:#578bb8;
line-height:1em;
padding:5px 10px;
width:128px;
border-width:0 1px 1px 1px;
}
/* Links on hover */
.cssnav ul ul a:hover {
background:#80b0da;
}
/* Visibility */
.cssnav ul li:hover ul, .cssnav ul a:hover ul{
visibility:visible;
}
/* Third Level
———————————–*/
/* Links */
.cssnav ul ul ul a, .cssnav ul ul ul a:visited {
background:#578bb8;
}
/* Links on hover */
.cssnav ul ul ul a:hover {
background:#80b0da;
}
/* Positioning */
.cssnav ul ul ul{
left:150px;
top:-1px;
}
.cssnav ul ul ul.left {
left:-150px;
}
/* Visibility */
.cssnav ul :hover ul ul{
visibility:hidden;
}
.cssnav ul :hover ul :hover ul{
visibility:visible;
}
/* All Sub Levels
———————————–*/
/* Default visibility */
.cssnav ul ul {
visibility:hidden;
position:absolute;
top:26px;
left:0;
border-top:1px solid #fff;
}
/* IE Table
———————————–*/
.cssnav table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
// Html
[code=html]
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”testnav.css” media=”screen” />
</head>
<body>
<div class=”cssnav”>
<ul>
<li><a href=”#”>Home</a></li>
<li>
<a href=”#”>Pages
<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#” title=”Page 1″>Page 1</a></li>
<li><a href=”#” title=”Page 2″>Page 2</a></li>
<li><a href=”#” title=”Page 3″>Page 3</a></li>
<li><a href=”#” title=”Page 4″>Page 4</a></li>
<li>
<a class=”drop” href=”#” title=”Page5″>Page 5
<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#” title=”Sub Page 1″>Sub Page 1</a></li>
<li><a href=”#” title=”Sub Page 1″>Sub Page 2</a></li>
<li><a href=”#” title=”Sub Page 1″>Sub Page 3</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li>
<a href=”#”>Links
<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#” title=”Link 1″>Link 1</a></li>
<li><a href=”#” title=”Link 2″>Link 2</a></li>
<li><a href=”#” title=”Link 3″>Link 3</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li>
<a href=”#”>More Links
<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul>
<li><a href=”#” title=”More Links 1″>More Links 1</a></li>
<li>
<a class=”drop” href=”#” title=”More Links 2″>More Links 2
<!–[if IE 7]><!–></a><!–<![endif]–>
<!–[if lte IE 6]><table><tr><td><![endif]–>
<ul class=”left”>
<li><a href=”#” title=”More Sub Links 1″>More Sub Links 1</a></li>
<li><a href=”#” title=”More Sub Links 2″>More Sub Links 2</a></li>
<li><a href=”#” title=”More Sub Links 3″>More Sub Links 3</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
<li><a href=”#” title=”More Links 3″>More Links 3</a></li>
<li><a href=”#” title=”More Links 4″>More Links 4</a></li>
<li><a href=”#” title=”More Links 5″>More Links 5</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–>
</li>
</ul>
</div>
</body>
</html>