hey guy
can anybody help me with my drop down menu?the problem is that the drop down menu does not close.
see here
http://www.trainmesalem.com
it should show the sub menu when the main menu item is clicked or the mouse rolls over it but as you can see it remains open showing all the sub menu.
below are the CSS part and the html part.
Any help would be appreciated.thanks
here is the CCS code that i used:
/*** Nav bar styles ***/
ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
ul.nav>li:hover{
padding-right: 1px;
}[*]
ul.nav li>ul{
/*Make the sub list items invisible*/
display: block;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}
ul.nav li:hover>ul{
/*When hovered, make them appear*/
display : block;
}
.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
display: block;
padding: 2px 10px;
}
/*** Menu colors (customizable) ***/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
ul.nav{
display: table;
/*Just add the following properties and values*/
width: 100%;
table-layout: closed;
}
here is the html part:
<div class='top-nav'>
<ul class='nav'>
<li><a href='/'><strong>Home</strong></a></li>
<li><a href='/'><strong>Contact</strong></a>
</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Finance</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>bankrupt</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Loan</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Consolidation</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Credit card</a></li>
</ul>
</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Insurance</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Life insurance</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>car insurance</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>pet insurance</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>whole life insurance</a></li>
</ul>
</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Banking</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Types of Bank</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Bank solutions</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Interest Rates</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Premium</a></li>
</ul>
</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Banking</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Types of Bank</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Bank solutions</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Interest Rates</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Premium</a></li>
</ul>
</li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'><strong>Business</strong>
</a><ul>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Contract</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Selling and Buying</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Interest Rates</a></li>
<li><a href='http://www.technology07.us/2008/01/links-to-partners.html'>Premium</a></li>
</ul>
</li>
</ul>
</div>