Having difficulty getting the hover menu to function correctly. When hovering over the main menu item in the link below, the submenu appears but disappears when attempting to hover over it.
HTML Code
<div id='menu'>
<ul>
<li>
<center><a href="#">Services</a>
</center>
<ul>
<li><a href="#">Moving help ~ Deliveries</a>
</li>
<li><a href="#">Around the property</a>
</li>
<li> <a href="#"> Cleaning</a>
</li>
<li> <a href="#"> Minor Home Repairs</a>
</li>
<li><a href="#"> Personal Care</a>
</li>
<li><a href="#"> Skiller Handyperson</a>
</li>
</ul>
</li>
<li>
<center> <a href='#'>company</a>
</center>
<ul>
<li> <a href="about.php" class="firstli">About us </a>
</li>
<li> <a href="contact.php">Contact us </a>
</li>
<li> <a href="faq.php">F.A.Q. </a>
</li>
<li><a href="term.php">Terms of Use </a>
</li>
<li><a href="privacy.php" style="border-right:0px;">Privacy Policy </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS Styling
#menu * {
padding:0;
margin: 0;
font: 12px georgia;
list-style-type:none;
}
#menu {
margin-top:300px;
background-color:none;
float: left;
line-height: 10px;
}
#menu a {
display: block;
text-decoration: none;
}
#menu a:hover {
}
#menu ul li ul li a:hover {
padding-left:9px;
border-left: solid 1px #000;
}
#menu ul {
margin-bottom:10px;
}
#menu ul li ul li {
width: 140px;
border: none;
color: #eee;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background:black;
}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
}
#menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
}
#menu ul li a {
padding-left: 15px padding-right: 10px;
}
#menu li {
position:relative;
float:left;
}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {
display:none;
list-style-type:none;
width: 140px;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display:block;
}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-top: -22px;
font: 10px;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
bottom:100%;
}