MonteChristo
02-29-2008, 03:52 AM
i am trying to build a simple two-tiered vertical menu. the idea is that you have your category heading buttons with an arrow beside it, which you roll-over and a different arrow shows, and sub menu buttons below each category header. when you roll over the category head button (with the arrow) it goes wonky. I'm getting pretty desperate here, any help would be great!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
body {
background-color: #FF0000;
}
.arrowlistmenu{
width: 220px; /*width of menu*/
}
.arrowlistmenu .headerbar a{
list-style-type: none;
display:block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: white;
background-color: #FF0000;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
text-transform: uppercase;
text-decoration: none;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 10px;
padding-left: 19px; /*link text is indented 19px*/
margin-top:0;
margin-bottom:0;
}
.arrowlistmenu .headerbar a:hover{
color: #FF0000;
background-color: white;
background: url(media/arrowbulletover.png) no-repeat center left; /*custom bullet list image*/
margin-top:0;
margin-bottom:0;
}
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.arrowlistmenu ul li a{
background-color: #FF0000;
color: white;
background: none; /*custom bullet list image*/
display: block;
padding-top:3px;
padding-bottom:3px;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #FF0000;
background-color: white;
}
</style>
</head>
<body>
<div class="arrowlistmenu">
<span class="headerbar"><a href="#">CSS Library</a></span>
<ul>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
</ul>
<span class="headerbar"><a href="#">CSS Drive</a></span>
<ul>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>
</div>
</body>
</html>
or better yet, look at the link to better understand the 'wonky':
http://www.bluestudio.ca/vmenu/vmenu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
body {
background-color: #FF0000;
}
.arrowlistmenu{
width: 220px; /*width of menu*/
}
.arrowlistmenu .headerbar a{
list-style-type: none;
display:block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: white;
background-color: #FF0000;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
text-transform: uppercase;
text-decoration: none;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 10px;
padding-left: 19px; /*link text is indented 19px*/
margin-top:0;
margin-bottom:0;
}
.arrowlistmenu .headerbar a:hover{
color: #FF0000;
background-color: white;
background: url(media/arrowbulletover.png) no-repeat center left; /*custom bullet list image*/
margin-top:0;
margin-bottom:0;
}
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.arrowlistmenu ul li a{
background-color: #FF0000;
color: white;
background: none; /*custom bullet list image*/
display: block;
padding-top:3px;
padding-bottom:3px;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #FF0000;
background-color: white;
}
</style>
</head>
<body>
<div class="arrowlistmenu">
<span class="headerbar"><a href="#">CSS Library</a></span>
<ul>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
</ul>
<span class="headerbar"><a href="#">CSS Drive</a></span>
<ul>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>
</div>
</body>
</html>
or better yet, look at the link to better understand the 'wonky':
http://www.bluestudio.ca/vmenu/vmenu.html