Vertical menu, drop down help

jcdevelopment · 08-26-2008, 06:11 PM

I dont know why i am having a brain fart on this, but i cant seem to remember how to make a simple drop down. I have looked everywhere but vertical menus are hard to come by.

Here is my CSS

Code:

.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(gfx/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 5px 0 5px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 1px 0;
line-height: 14px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a li{
display:none;
}

.urbangreymenu ul li a:hover li{
display:block;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

HTML (for area in question)

Code:

<h3 class="headerbar">Marketing</h3>

<ul>
    <li><a href="/index.shtml">My Ebby</a></li>
    <li><a href="#">Send E-card</a>
    <ul>
<li><a href="http://www.myebby.com/apps/ecards/ebby.php">Ebby</a></li>
<li><a href="http://www.myebby.com/apps/ecards/et.php">Ellen</a></li>	
<li><a href="http://www.myebby.com/apps/ecards/dpm.php">DPM</a></li>
     </ul>
     </li>     <li><a href="/packet/lpackets.html">Buyer/Seller Packet</a></li>
     <li><a href="/packet/lpackets_esp.html">Buyer/Seller Packet Esp.</a></li>    
     <li><a href="/myebby-cgi/homeshow.cgi">Homeshow</a></li>     
     <li><a href="/vtours/index.html">Virtual Tours</a></li>     
     <li><a href="http://ebbyart.ebby.com/">Logos</a></li>    
     <li><a href="/mediakits.html">Media Kits</a></li>     
     <li><a href="/adv/index.html">Advertising Info</a></li>     
     <li><a href="/cgi-bin/donotcall.pl">Do Not Call Search</a></li>    
     <li><a href="/ebbystore/index.html">Ebby Store</a></li>   
     <li><a href="/agentpages/">Manage Ebby.com Page</a></li>    
     <li><a href="/flyers.html">Marketing Flyers</a></li>
     </ul>

the red highlighted is what i am trying to hide, and once hovered, it lides down.

I hate to be vague and just give code, but its on an Intranet.

Thanks for any suggestions or tips.

BoldUlysses · 08-26-2008, 06:25 PM

Something that really, really helps me when doing CSS dropdown menus is indenting the HTML. There are just too many uls and lis around to do it otherwise...

I didn't have to modify your markup (other than formatting it for my own benefit), just changed the CSS as shown:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
<style type="text/css">
	
	.urbangreymenu{
	width: 190px; /*width of menu*/
	}

	.urbangreymenu .headerbar{
	font: bold 13px Verdana;
	color: white;
	background: #606060 url(gfx/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
	margin-bottom: 0; /*bottom spacing between header and rest of content*/
	text-transform: uppercase;
	padding: 5px 0 5px 31px; /*31px is left indentation of header text*/
	}

	.urbangreymenu ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
	}

	.urbangreymenu ul li{
	padding-bottom: 2px; /*bottom spacing between menu items*/
	position:relative;
	}

	.urbangreymenu ul li a{
	font: normal 12px Arial;
	color: black;
	background: #E9E9E9;
	display: block;
	padding: 1px 0;
	line-height: 14px;
	padding-left: 8px; /*link text is indented 8px*/
	text-decoration: none;
	}

	.urbangreymenu ul ul{
	display:none;
	position:absolute;
	left:100%;
	top:0px;
	width:100%;
	}

	.urbangreymenu ul li:hover ul{
	display:block;
	}

	.urbangreymenu ul li a:visited{
	color: black;
	}

	.urbangreymenu ul li a:hover{ /*hover state CSS*/
	color: white;
	background: black;
	}
	
</style>

</head>

<body>
	
	<div class="urbangreymenu">

		<h3 class="headerbar">Marketing</h3>

		<ul>
		    <li><a href="/index.shtml">My Ebby</a></li>
		    <li><a href="#">Send E-card</a>
			    <ul>
					<li><a href="http://www.myebby.com/apps/ecards/ebby.php">Ebby</a></li>
					<li><a href="http://www.myebby.com/apps/ecards/et.php">Ellen</a></li>	
					<li><a href="http://www.myebby.com/apps/ecards/dpm.php">DPM</a></li>
			     </ul>
		    </li>     
			<li><a href="/packet/lpackets.html">Buyer/Seller Packet</a></li>
		    <li><a href="/packet/lpackets_esp.html">Buyer/Seller Packet Esp.</a></li>    
		    <li><a href="/myebby-cgi/homeshow.cgi">Homeshow</a></li>     
		    <li><a href="/vtours/index.html">Virtual Tours</a></li>     
		    <li><a href="http://ebbyart.ebby.com/">Logos</a></li>    
		    <li><a href="/mediakits.html">Media Kits</a></li>     
		    <li><a href="/adv/index.html">Advertising Info</a></li>     
		    <li><a href="/cgi-bin/donotcall.pl">Do Not Call Search</a></li>    
		    <li><a href="/ebbystore/index.html">Ebby Store</a></li>   
		    <li><a href="/agentpages/">Manage Ebby.com Page</a></li>    
		    <li><a href="/flyers.html">Marketing Flyers</a></li>
		 </ul>
	
	</div>

</body>
</html>

jcdevelopment · 08-26-2008, 06:31 PM

Ah.. ok thnak you very much. I knoew i was missing something stupid like that.

I need them under the links but i can manage that. Thank you very much!

BoldUlysses · 08-26-2008, 06:35 PM

You're welcome. It also occurred to me that you probably do indent, but that it just didn't come through when you pasted the code into the [CODE][/CODE] tags. So I apologize if that came across as patronizing.

Good luck!

jcdevelopment · 08-26-2008, 06:43 PM

No problem. I make it a habit to have very clean code, i ran into trouble a while ago for having messy code. I uploaded the index page of our companies website and i didnt look at it for an hour... and then someone called and said everything looked horrible.

I learned after that.. it was bad too because on average we have over 150,000 people visit our site a day, with an average of 5 min per visit.. so needless to say i messed up!