...

View Full Version : 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



.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)


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


<!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&#37;;
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 &#91;CODE&#93;&#91;/CODE&#93; tags. So I apologize if that came across as patronizing.

Good luck! :thumbsup:

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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum