2 tiered vertical menu with CSS

**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!

HTML Code:

<!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

**Nailgunpro** · 03-01-2008, 03:13 PM

Code:

.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;
}

Im sorry if i misunderstood your question, but here goes. The anwser is above. By "wonky", im guessing you mean whenever you move your mouse over the headerbar, it turns black, right? In the CSS above, before the { starts you have the "a:hover". THis defines what happens when a person purts their mouse over it. All you have to do is change the colors above in the code.

Thread: 2 tiered vertical menu with CSS

Thread Tools

Search Thread

2 tiered vertical menu with CSS

Bookmarks

Bookmarks

Posting Permissions