Hi all
I have a demo here - http://www.ttmt.org.uk/drop/
It’s a simple <ul> list naviagtion. Buttons 2 and 3 have a drop down.
The drop down menus appear on the right of the button below the next button.
Why dose the drop down appear here. How can I get the drop down to appear under the when you roll over it.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<!--css-->
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#eee;
font-family:Helvetica, sans-serif;
}
nav{
margin:50px;
}
nav ul li{
display:inline;
position:relative;
}
nav ul li a{
float:left;
display:block;
padding:20px;
background:#fff;
text-decoration:none;
margin:0 2px 0 0;
}
nav ul li ul{
position:absolute;
left:-999em;
}
nav ul li:hover ul{
left:auto;
left:-120px;
top:58px;
}
nav ul li ul li a{
background:red;
float:none;
color:#fff;
margin:0 0 2px 0;
}
</style>
<title>Title of the document</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two ></a>
<ul>
<li><a href="#">Two/One</a></li>
<li><a href="#">Two/Two</a></li>
<li><a href="#">Two/Three</a></li>
<li><a href="#">Two/Four</a></li>
</ul>
</li>
<li><a href="#">Three ></a>
<ul>
<li><a href="#">Three/One</a></li>
<li><a href="#">Three/Two</a></li>
<li><a href="#">Three/Three</a></li>
</ul>
</li>
<li><a href="#">Four</a></li>
</ul>
</nav>
</body>
</html>