View Full Version : Css Pop Up Menu - need help!

09-22-2007, 06:34 PM

I'm new to CSS and have been trying for the past day to figure out how to make a pop up menu. I've managed to make the menu, but I can't figure out how to make the submenus only pop up when the main menu link is hovered over. What I've marked in bold is what I think should make the submenu area disappear, but it hasn't worked. Can anyone help me?


So far, I have this for my css file:

/* Left sidebar and menu */


#leftside {clear:left; float:left; margin:0 0 10px; padding:0; width:150px;}
#leftside ul.avmenu {list-style:none; margin:0 0 18px; padding:0; width:150px;}
#leftside ul.avmenu li {display:inline; padding:0; width:150px;}
#leftside ul.avmenu li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;}

#leftside ul.avmenu li a:hover,
#leftside ul.avmenu li a.current {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border-bottom:1px solid #b0b0b0; border-left:4px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050;}
#leftside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;}
#leftside ul.avmenu ul a {padding:3px 1px 3px 5px; width:123px;}
#leftside ul.avmenu ul ul {font-size:1em; width:120px;}
#leftside ul.avmenu ul ul a {width:108px;}

#leftside ul.avmenu ul li ul {list-style: none; position: absolute; left: 140px; top: 0; display: none; width: 125px;border-left:1px solid #FFF;}
#leftside ul.avmenu ul li a:hover ul {display: block;}

#leftside h2 {font-size:1.5em; font-weight:400;}

09-22-2007, 06:36 PM
Oh, and my Html code is as follows:

<div id="leftside">
<h2 class="hide">Site menu:</h2>
<ul class="avmenu">
<li><a class="current" href="../../andreas00-v2.0/andreas00-v2.0/index.html">Campus Y </a></li>
<li><a href="../../andreas00-v2.0/andreas00-v2.0/styles.html">About Us </a></li>
<li><a href="gallery1.html">Gallery 1</a></li>
<li><a href="gallery2.html">Gallery 2</a></li>
<li><a href="gallery3.html">Gallery 3</a></li>
<li><a href="gallery4.html">Gallery 4</a></li>
<li><a href="../../andreas00-v2.0/andreas00-v2.0/styles.html">Volunteer!</a></li>
<li><a href="../../andreas00-v2.0/andreas00-v2.0/styles.html">Calendar</a></li>
<li><a href="../../andreas00-v2.0/andreas00-v2.0/2-columns.html">Programs </a></li>
<li><a href="../../andreas00-v2.0/andreas00-v2.0/3-columns.html">Giving</a></li>
<li><a href="../../andreas00-v2.0/andreas00-v2.0/3-columns.html">Suggestions</a></li>
<li><a href="../../andreas00-v2.0/andreas00-v2.0/themes.html">Contact Us </a></li>
<li><a href="../../andreas00-v2.0/andreas00-v2.0/3-columns.html">PL Section </a></li>

09-22-2007, 11:59 PM
These guys have done all the thinking for you; just copy the code and play with the look:



09-24-2007, 01:37 AM