Menu
Hi All,
I am still having problems with getting this menu working exactly like I want it to.
I’ve asked for different things in two different threads before. The first was getting 2 images to use as my background color for my menu (see thread [URL=”http://www.webdeveloper.com/forum/showthread.php?t=172855″]here[URL=”http://www.webdeveloper.com/forum/showthread.php?t=173002″]here
Now my current problem is, with the information I got from the above two threads, I had (I thought) enough information to get the menu done. The background images and the hover images were working on the parent menu item, but I also wanted to have them on the sub level menu items. I’ve gotten it almost right, but I just can’t finish it (probably a much better way to do it anyways).
I have the background images working on the sub level menus, and I can get the left hover image working on hover, I just can’t get the right image working properly. I have it attached and can see it, but it aligns to the right of the menu text, not the <li> that the text is positioned in. Can anyone help me to figure out what I am doing wrong? I’ve tried moving my tags around and switching which tags the images are attached to and nothing, this is the closest I can get with it.
[B]HTML Page
[CODE]<!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=”sfhover.js”></script>
<link rel=”stylesheet” type=”text/css” href=”multimenuvert.css”>
</head>
<body>
<ul id=”vertnav”>
<li><div class=”toplev”><a href=”#” >first Level menu</a></div>
<ul>
<li><div class=”sublev”><a href=”#” ><span class=”tohover”>second Level menu</span></a></div></li>
<li><div class=”sublev”><a href=”#” ><span class=”tohover”>second Level menu</span></a></div>
<ul>
<li><div class=”sublev”><a href=”#” ><span class=”tohover”>third Level menu</span></a></div></li>
</ul>
</li>
</ul>
</li>
<li><div class=”toplev”><a href=”#” >fourth Level menu</a></div>
<ul>
<li><a href=”#” >fifth Level menu</a></li>
<li><a href=”#” >fifth Level menu</a>
<ul>
<li><a href=”#” >sixth Level menu</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
[B]CSS Page
[CODE]#vertnav{
padding:0;
margin:0;
list-style: none;
width: 12em;
}
#vertnav li {
margin:0;
position: relative;
width: 12em;
background-color:gray;
border:solid 1px white;
border-bottom:none;
padding: 0em;
}
#vertnav li:last-child{border-bottom:1px solid #CCC;}
#vertnav a {
text-decoration:none;
display:block;
height:1em;
line-height: 1em;
padding: 0.1em;
}
#vertnav a:link, a:visited, a:active {
Color: Red;
}
#vertnav a:hover {
Color: White;
}
#vertnav .toplev {
background-image: url(test_menu/button-left.jpg);
background-repeat: no-repeat;
background-position: left center;
}
#vertnav .toplev a {
background-image: url(test_menu/button-right.jpg);
background-repeat: no-repeat;
background-position: right center;
text-align: center;
}
#vertnav li:hover .toplev, #vertnav li.over .toplev {
background-image: url(test_menu/buttonOver-left.jpg);
}
#vertnav li:hover .toplev a, #vertnav li.over .toplev a {
background-image: url(test_menu/buttonOver-right.jpg);
color: #FFFFFF;
}
#vertnav .sublev {
background-image: url(test_menu/button-left.jpg);
background-repeat: no-repeat;
background-position: left center;
}
#vertnav .sublev a {
background-image: url(test_menu/button-right.jpg);
background-repeat: no-repeat;
background-position: right center;
text-align: center;
}
#vertnav .sublev a:hover {
background-image: url(test_menu/buttonOver-left.jpg);
}
#vertnav .sublev a:hover .tohover{
background-image: url(test_menu/buttonOver-right.jpg);
background-repeat: no-repeat;
background-position: right center;
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.ver 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;
}
My goal is to have the images and hover images applied to the entire menu (parent and sub, and sub sub levels), I am just working my way up to limit my errors to a manageable number.
And if you want to see the images that I am using, they are attached to the first post on the second link above. I didn’t want to post the same images yet again when they are right there.
Thanks,
Jeremy