Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts

    Vertical menu, drop down help

    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.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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&#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>
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    jcdevelopment (08-26-2008)

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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!

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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!
    matt | design | blog

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •