CSS Drop Down Menu <ul> Hover

xavier039 · #1 (**permalink**) 06-01-10, 09:51 AM

Right now I have my drop down menu up and working. However, the when you hover over the <ul> it disappears when you hover over a <li> I would like it to stay.

Here is a link to see. Thrive - Navigating Insights

scott2500uk · #2 (**permalink**) 06-02-10, 10:49 AM

The entire page layout is broken in IE.

Without trying to sound mean I think you need to start from the top again.

As for your navigation the only thing u should have inbetween <ul></ul> are <li>'s why are you using spans?

Your navigation should go something like this:

HTML Code:

<ul id="navigation">
  <li>First Menu Link
    <ul>
      <li>Sub Menu Link</li>
      <li>Sub Menu Link</li>
      <li>Sub Menu Link</li>
    </ul>
  </li>
  <li>Second Menu Link
    <ul>
      <li>Sub Menu Link</li>
      <li>Sub Menu Link</li>
      <li>Sub Menu Link</li>
    </ul>
  </li>
  <li>Third Menu Link
    <ul>
      <li>Sub Menu Link</li>
      <li>Sub Menu Link</li>
      <li>Sub Menu Link</li>
    </ul>
  </li>
</ul>

You can then style the nav you are after by targeting the navigation elements using CSS selectors:

Code:

ul#navigation li {}
ul#navigation li ul {}
ul#navigation li ul li {}

you can add more classes to each li to target an individual list item to do something different.

As a tip you can float LI elements to get them to apear on one line. Also you can use border with a bit of padding and margin to get the | effect you are after too without having to put in seperate seperator code.

decompilando · #3 (**permalink**) 08-04-10, 08:44 AM

yes first check the doctype stay out of ie5.5 you could trigger quirksmode,

i use this one.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

bebeinc · #4 (**permalink**) 12-03-10, 07:24 AM

nice one fellas been looking out for that

webtechie · #5 (**permalink**) 07-11-11, 12:29 AM

Html Coad:

<div class="navigation">

<ul>

<li><a href="index.php">Home 01</a></li>

<li><a href="about.php">Home 02</a></li>

<li><a href="#">Home 03</a>
<ul>
<li><a href="men.php">Home A</a></li>
<li><a href="women.php">Home B</a></li>
<li><a href="success-stories.php">Home C</a></li>
</ul>
</li>

<li><a href="#">Home 04</a>
<ul>
<li><a href="matchmaker-facts.php">Home A</a></li>
<li><a href="date-facts.php">Home B</a></li>
</ul>
</li>

<li><a href="consultation.php">Home 05</a></li>

<li><a href="newsletter.php">Home 06</a></li>

<li><a href="contact.php">Home 07</a></li>

</ul>

</div>

Css Code:

.navigation{
height:40px;
font:normal 13px/40px "Arial", Helvetica, sans-serif;
color:#a9a9a9;
text-shadow: 0px 1px #444;
background:url(../images/navigation_bg.png) 0 0 no-repeat;
width:970px;
margin:0 auto;
}

.navigation ul{
padding:0;
margin:0;
list-style:none;
}

.navigation ul li{
padding:0;
float:left;
font:normal 13px/40px "Arial", Helvetica, sans-serif;
color:#a9a9a9;
text-shadow: 0px 1px #444;
margin:0px 12px;
position:relative;
}

.navigation ul li a{
font:normal 13px/40px "Arial", Helvetica, sans-serif;
color:#a9a9a9;
text-decoration:none;
text-shadow: 0px 1px #444;
}

.navigation ul li a:hover{
background:url(../images/hover_left.png) left 10px no-repeat;
color:#ffffff;
text-decoration:none;
}

.navigation ul li ul{
display:none;
position:absolute;
background-color:#252525;
padding:10px;
}

.navigation ul li ul li{
float:none;
padding:0;
margin:0;
width:150px;
font:normal 13px/24px "Arial", Helvetica, sans-serif;
color:#a9a9a9;
text-decoration:none;
z-index:100;
}

.navigation ul li ul li a{
font:normal 13px/24px "Arial", Helvetica, sans-serif;
color:#a9a9a9;
text-decoration:none;
}

.navigation ul li ul li a:hover{
color:#a9a9a9;
}

.navigation ul li:hover > ul{
display:block;
}