Forum Moderators: not2easy
Under menu 3 you'll see two level 3 menus display automatically. I'd like to be able to make these appear next to the proper level 2 menu item, like a MAC Apple or Windows Start menu.
Right now what I DO like is how when you move over the level 3 menus their level 2 menu also becomes highlighted (colors chosen are again for test purposes). I'd like to keep this level 2 highlight effect when going over the level 3 menus.
So in effect I want to do two things...
1.) Hide level 3 menus unless the mouse hovers on top of their parent level 2 menu.
2.) Ensure that the top of the top level 3 menu is at the same vertical position as the top of the parent level 2 menu.
I have not been able to figure this out on my own and I've been playing with it all day so I figured I'd hand it over to the professionals! ;-)
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
ul.menu a:link {
color: #fff;
display: block;
font-family: arial;
font-size: 12px;
padding: 1px 0px 1px 5px;
text-decoration: none;
}
ul.menu a:visited {
color: #fff;
display: block;
font-family: arial;
font-size: 12px;
padding: 1px 0px 1px 5px;
text-decoration: none;
}
ul.menu a:hover {
background: #fff;
color: #000;
display: block;
font-family: arial;
font-size: 12px;
padding: 1px 0px 1px 5px;
text-decoration: none;
}
ul.menu a:active {
color: #fff;
display: block;
font-family: arial;
font-size: 12px;
padding: 1px 0px 1px 5px;
text-decoration: none;
}
ul.menu {
margin: 0px;
padding: 0px;
position: absolute;
}
ul.menu li {
background: #069;
float: left;
list-style: none;
width: 100px;
}
ul.menu li:hover {
background: #ff0;
left: auto;
}
ul.submenu1 {
left: -8em;
margin: 0px;
padding: 0px;
position: absolute;
width: 125px;
}
ul.submenu2 {
left: -8em;
margin: 0px;
padding: 0px;
position: absolute;
width: 125px;
}
ul.menu li:hover ul.submenu1 {
left: auto;
}
ul.menu li:hover ul.submenu2 {
left: 100px;
margin: 0px;
padding: 0px;
}
</style>
</head><body>
<!-- Menu Begin -->
<div class="menu">
<ul class="menu">
<li><a href="#">Menu 1</a>
<ul class="submenu1">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul class="submenu1">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="submenu1">
<li><a href="#">Menu</a></li>
<li><a href="#">Level 2 Menu</a>
<ul class="submenu2">
<li><a href="#">Level 3 Menu</a></li>
<li><a href="#">Level 3 Menu</a></li>
</ul></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul class="submenu1">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
</ul>
</div>
<!-- Menu End --></body>
</html>
I've kinda figured it out ... it is a selector issue I think combined with positioning. Interesting...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Menus</title>
<style type="text/css">
<!--
body {
background: #000;
}
div.menu {
border: #f00 solid 1px;
font-family: Arial, sans-serif;
height: 10px;
margin: 0px;
padding: 0px;
width: 800px;
}ul {
padding: 0px;
margin: 0px;
}ul li {
list-style-type: none;
position: relative;
margin: 0px;
padding: 0px;
}ul ul {
display: none;
}ul li:hover > ul {
display: block;
left: 0px;
position: absolute;
top: 19px;
}li.sub ul {
display: none;
}li.sub li:hover > ul {
display: block;
left: 100px;
position: absolute;
top: 1px;
}li a {
background: #FFF;
display: block;
padding: 0px;
text-decoration: none;
}li.sub > a {
background: #F0E;
}div#main {
margin: 0px;
padding: 0px;
}ul#topmenu {
width: 6em;
}ul#topmenu > li:hover > ul {
left: -3px;
top: 1.5em;
width: 10em;
}ul ul {
width: 10em;
}ul.menu li {
float: left;
left: auto;
width: 100px;
}-->
</style>
</head>
<body><div class="menu">
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li class="sub"><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li><li class="sub"><a href="#">Menu</a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li><li><a href="#">Menu</a></li>
</ul></li>
<li><a href="#">Menu 4</a></li>
<li class="sub"><a href="#">Menu 5</a>
<ul>
<li class="sub"><a href="#">complexspiral</a>
<ul>
<li><a href="#">...devolved</a></li><li><a href="#">...distorted</a></li>
</ul>
</li>
<li><a href="#">pure CSS popups</a></li>
<li><a href="#">pure CSS menus</a></li>
<li><a href="#">curvelicious</a></li>
<li class="sub"><a href="#">slantastic</a><ul>
<li><a href="#">slanty claus?</a></li>
</ul>
</li>
<li><a href="#">ragged float</a></li>
<li><a href="#">boxpunch</a></li>
</ul></li>
</ul>
</div></body>
</html>
