my sub navigation menu items are being displayed on top of each other
here is the code:
/* NAVIGATION */ .nav-bar {width: 100%; height: 80px; background-image:url(../images/bg-menu80.jpg);}
.nav-hold {overflow: hidden;}
.nav-list {float: right;}
.nav-list li {float: left; width: auto; position: relative;}
.nav-list li a {text-decoration: none; display:block; padding: 30px 7px 20px 7px; color: #f9f9f9; font-size: .9em; font-weight: bold;}
.nav-list li ul {display: none;}
.nav-list li a:hover {text-decoration: none; display: block; padding: 30px 7px 20px 7px; color: #000; font-size: .9em; font-weight: bold; background-color: #e7e4e4;}
.nav-list li a:hover li{display: block; position: absolute; margin: 0; padding: 0;}
.nav-list li a:hover li{float: left;}
.nav-list li:hover li a{ background-color: #333; border-bottom: 1px solid #fff; color: #FFF;}
<ul class="nav-list" id="navigation"><!--Menu list-->
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li> <ul><a href="members.html">Members</a>
<li><a href="board.html">Board of Directors</a></li>
<li><a href="committee.html">Committee</a></li>
</ul></li> <li><a href="join.html">Join Us</a></li> <li><a href="
events.html">Events</a></li>
<li><a href="rules.html">Rules & Guidelines</a></li> <li><a href="archive.html">Archive</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="#">Login</a></li> </ul><!--ENDS Menu list-->
