PDA

View Full Version : Help with hovering submenu items.



tymlls05
07-02-2009, 06:28 PM
The code below appears best in mozilla.

I need the items inside the class of "div.d#" to appear when the mouse hovers it's parent. You should just be able to plug the code in below to any page to see the menu.

Anytime I try to use the css to hover over where it would naturally lay within the code, it gets dis-positioned.





<style>
#navMenu {

z-index:100;
width:100%;
}
#navMenu a:link, #navMenu a:visited {
text-decoration:none;
font-weight:bold;
font-size:12px;
color:#fff;
}

#navMenu a:hover {
color: #ACD373;
}

/* main */
#navMenu ul {
margin: 0;
padding: 0;
list-style: none;
display:block;

}


#navMenu li {
display:inline;
}
/* menu */
#navMenu li a:link, #navMenu li a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: White;
padding: 5px 0 6px 20px;
}
#navMenu li a:hover {
color: #ACD373;
padding: 5px 0 6px 20px;
}

/* subMenu */
#navMenu div a:link, #navMenu div a:visited {
font-weight: normal;
font-size: 10px;
color:#004e27;
padding: 0px 0 0px 10px;

}
#navMenu div a:hover {
font-size: 10px;
color:#fff;
padding: 0px 0 0px 10px;
}

div.d0
{
z-index:101;
}
div.n0
{
background-color:#e6d19a;
border:1px solid #004e27;
padding: 0px 0 0px 10px;
border-top:0px;
position:relative;
}
div.n0:hover
{
background-color:#004e27;
border:1px solid #e6d19a;
border-bottom:0px;
padding: 0px 0 0px 10px;
}
div.d73
{
z-index:101;
}
div.n73
{
background-color:#e6d19a;
border:1px solid #004e27;
padding: 0px 0 0px 10px;
border-top:0px;
position:relative;
}
div.n73:hover
{
background-color:#004e27;
border:1px solid #e6d19a;
border-bottom:0px;
padding: 0px 0 0px 10px;
}
div.d83
{
z-index:101;
}
div.n83
{
background-color:#e6d19a;
border:1px solid #004e27;
padding: 0px 0 0px 10px;
border-top:0px;
position:relative;
}
div.n83:hover
{
background-color:#004e27;
border:1px solid #e6d19a;
border-bottom:0px;
padding: 0px 0 0px 10px;
}
div.d85
{
z-index:101;
}
div.n85
{
background-color:#e6d19a;
border:1px solid #004e27;
padding: 0px 0 0px 10px;
border-top:0px;
position:relative;
}
div.n85:hover
{
background-color:#004e27;
border:1px solid #e6d19a;
border-bottom:0px;
padding: 0px 0 0px 10px;
}

</style>

<div id="navMenu">
<ul>



<a href="index.php">Home</a><br><div class="d60"></div><a href="page.php?kei=24">About Us</a><br><div class="d61"></div><a href="staff.php">Agents</a><br><div class="d72"></div><a href="#">Sell A Home</a><br><div class="d83"><div class=n83><a href="page.php?kei=32">&raquo;Homeseller Tips</a></div><div class=n83><a href="idx.php?format=1&offset=0">&raquo;Properties Search</a></div></div><a href="#">Buy A Home</a><br><div class="d85"><div class=n85><a href="idx.php?office=40&offset=0">&raquo;Properties Search</a></div></div><a href="idx.php?newsearch=true">Search Listings</a><br><div class="d66"></div><a href="idx.php?format=4&offset=0">Commercial</a><br><div class="d64"></div><a href="idx.php?format=3&offset=0">Land</a><br><div class="d65"></div><a href="nimbus.php">Photos</a><br><div class="d68"></div><a href="links.php">Links</a><br><div class="d69"></div><a href="page.php?kei=23">Contact Us</a><br><div class="d70"></div><a href="page.php?kei=120">Careers</a><br><div class="d73"><div class=n73><a href="page.php?kei=27">&raquo;Licensing</a></div><div class=n73><a href="page.php?kei=28">&raquo;Is Real Estate For You?</a></div><div class=n73><a href="page.php?kei=38">&raquo;Why Allison-Lacy?</a></div><div class=n73><a href="page.php?kei=120">&raquo;All About Allison-Lacy</a></div><div class=n73><a href="page.php?kei=106">&raquo;Preparing for Your Interview</a></div><div class=n73><a href="page.php?kei=23">&raquo;Contact Us</a></div><div class=n73><a href="page.php?kei=30">&raquo;Referral Program</a></div></div><a href="http://agents.allisonlacy.com">Agent Login</a><br><div class="d88"></div></ul>

</div>