Drop out menu

[Quendian]

I have hacked together this CSS to make a drop out menu:

The only problem is that the drop out menus open up even if you don't hover your mouse over the link, e.g. you can hold your mouse on the other side of the page and the menu will pop out.

 

ul {

padding: 0;

margin: 0;

list-style-type: none;

}



li {

font: 12px Arial;

}



ul li {

position: relative;

}



li ul {

display: none;

}



li:hover ul{

position: absolute;

display: block;

border-bottom: thin solid black;

width: 120px;

background: rgb(255, 255, 255);

z-index: 1;

left: 125px;

top: 0;

}

[haku]

Without the HTML, the CSS tells us nothing.

 

 

[Quendian]

Sorry

 

<ul>
   <li><a class='menu' href='index.php?cat=Home'>Home</a>
      <ul>
         <li>test</li>
      </ul>
   </li>
</ul>

<ul>
   <li><a class='menu' href='index.php?cat=Contact'>Contact Us</a>
      <ul>
         <li>test</li>
      </ul>
   </li>
</ul>

 

[haku]

li elements are block elements, meaning they automatically have a 100% width (i.e. they fit the width of whatever container they are in). So you are probably hovering over the li tag, as it is stretching to the other side of the page, it just doesn't feel that way because the text inside the tag doesn't extend to the other side of the page. You need to set a width for your li tags if you don't want this to happen.

[Quendian]

That worked like a charm, thank you.