hi, im having a little problem with making a css drop down menu.

so far i have created it so when you mouse over a menu link with sub menus that it displays the sub manus under the main menu link in a horizontal strip. but the problem is when i mouseover them main menu link im unable to select that link only the submenus . also when i mouseover a new main menu link after hovering over a main menu link with submenus it doesnt remove the previous submenus and enable the hover of the new menu link unless i mouse way past the submenus and go directly over that link.

sorry if my explanation of the problem is confusing

heres the html

<div class="menu">
        <ul>
          <li><a href="index.php" class="active"><span>Home Page </span></a></li>
          <li><a href="about.php"><span> About Us </span></a>

 <ul>
    <li><a href=""><span>The Team</span></a></li>
    <li><a href=""><span>History</span></a></li>
    <li><a href=""><span>Vision</span></a></li>
    </ul>
</li>
  
          <li><a href="calendar.php"><span>Calendar</span></a>

 <ul>
    <li><a href=""><span>Timetable</span></a></li>
    <li><a href=""><span>latest news</span></a></li>
    </ul>
</li>
          <li><a href="photos.php"><span>Photos</span></a></li>
          <li><a href="contact.php"><span> Contact Us</span></a></li>
        </ul>
      </div>

and css

.menu { padding:38px 0 0 0; margin:0; width:480px; float:right; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:right; }
.menu ul li { float:left; margin:0; padding:0 5px; border:0;  }
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:12px 9px; background:none; }
.menu ul li a:hover { background: url(images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(images/l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(images/l_menu.gif) no-repeat left; }

.menu li ul { display: none; }

.menu li:hover ul {
  display: block;
  position: absolute;
}

.menu ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  background:none;
  margin-left: 1px;
  white-space: nowrap;
}

.menu li:hover ul {
  display: block;
  position: absolute;
}

.menu li:hover li {
  float: left;
  font-size: 11px;
  background:none;
  margin: 40px 0 0 0

}

also a link to a demo is found here

[url removed} (the submenus are only on the index.php file

thanks

/* extra info */

im using google chrome . i havent even tested in any other browsers yet. i hate to think what would happen in some versions of internet explorer

/* edit */

solution found, working demo available on ipponkarateacademy.co.uk

/* edit */

new problem , help would be appriciated

I'm pretty sure it's because you have placed the sub menu <ul> tags inside the <li> tags. So when the hidden list becomes visible, the surounding element, in this case the <li> tag, must grow in size to be able to contain it.

Since your sub menus stretch a bit to the right when visible, the containing <li> item must also stretch to the right, thereby covering the other list items next to it so that you cannot hover them.

So... Place the sub menus between the list tiems, as in

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
      <ul>
         <li>Item 2.1</li>
         <li>Item 2.2</li>
         <li>Item 2.3</li>
      </ul>
   <li>Item 3</li>
</ul>

You might also have to change your css to compensate for this change, I havn't looked into your css much.

when i do that the submenus are no longer hidden before mouseover. as im using

.menu li ul { display: none; }

thanks

As I wrote, you might have to change the css a bit. Change it to

.menu ul { display: none; }

wouldn't that hide the whole menu

Ah yes, of course
I meant:

.menu ul ul { display: none; }

that hides the submenu completely on mouseover. unless i need to modify more off the css. ive not slept for a few days so im probs just missing something obvious haha

thanks

Change :

.menu li:hover li {
  float: left;
  font-size: 11px;
  background:none;
  margin: 40px 0 0 0

}

to :

.menu li:hover ul {
  float: left;
  font-size: 11px;
  background:none;
  margin: 40px 0 0 0;
}

thank you for your help sir

have placed the sub menu <ul> tags inside the <li> tags.

That IS the proper way to do sub-lists, his syntax/coding was correct. Doing it this way is incorrect, sorry:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ul>
<li>Item 3</li>
</ul>

Originally Posted by LadynRed

That IS the proper way to do sub-lists, his syntax/coding was correct. Doing it this way is incorrect, sorry:

Really? Oh, my mistake

ok so that problem is fixed but now you have to chase the submenus when you you hover over the main menu item to be able to select it. im thinking it maybe because ive put a 40px margin in from the top at

.menu li:hover li {

. any ideas on how i could fix this issue

thanks

/* extra */

to see what i mean check ipponkarateacademy .co .uk

Yep, reduce that 40px top margin to about 25.

just a five pixel reduction did it. thanks