CODEWITHSUNDEEP
htmlcssdrop-down-menumenunav
Rigo Collazo
Rigo Collazo

Reputation: 7

My horizontal drop down with CSS, sub navigation menu items are being displayed on top of each other

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 &amp; 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-->

Upvotes: 0

Views: 2943

Answers (1)

davidpauljunior
davidpauljunior

Reputation: 8338

Your code doesn't really do much when you copy it directly into a jsfiddle (a website used to 'mock up' and test your HTML, CSS and JS), and there's not much description about what you are expecting/wanting to happen, so there's going to be some guess work here...

I think there are 2 problems here.

The HTML

First, the <li> that has the subnavigation <ul> inside it has some incorrect html. The <a href="members.html">Members</a> needs to be before the <ul>, not inside it.

So it should look like this:

<li>
    <a href="members.html">Members</a>
    <ul>
        <li><a href="board.html">Board of Directors</a>
        </li>
        <li><a href="committee.html">Committee</a>
        </li>
    </ul>
</li>

The CSS

Second, you are trying to display the subnavigation <ul> (by default this is display: none) when you hover on the <a> tag, but you need to do it when you hover the <li>, because it's that element that contains the subnavigation <ul>.

So it should look like this:

.nav-list li ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
}
.nav-list li:hover ul {
    display: block;
}

Here's a fiddle with my tweaks, hopefully that'll get you back on track.

http://jsfiddle.net/davidpauljunior/ve9Ub/

Upvotes: 1

Related Questions