Originally Posted by
anonymousdude
Anyone have any insight on the proper way to position a drop down menu, without knowing the height of the main horizontal menu that it drops down from?
In most cases you can use top:auto instead of using a dimension. In the following example you can resize the text and the drop down always stays in contact with the top menu.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
}
ul#nav{font-size:62.5%}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul#nav li {
position: relative;
float: left;
width:149px;
}
#nav li ul {
position: absolute;
left: 0;
top: auto;
margin-left:-999em;
}
#nav li li{width:149px;}
#nav li ul ul {
position: absolute;
left:100%;
top: -.1em;
margin-left:-999em;
}
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #fffccc; /* IE6 likes a background here */
padding: 5px;
border: 1px solid #ccc;
}
/* commented backslash mac hiding hack \*/
* html ul#nav li a {
height:1%
}
/* end hack */
/* this sets all hovered lists to red */
#nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
color: #fff;
background-color: red;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
color: #777;
background: #fffccc;
}
#nav li ul li a {
padding: 4px 5px;
} /* Sub Menu Styles */
ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul {
margin-left:-999em;
}
ul#nav li:hover ul, ul#nav li li:hover ul, u#navl li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul {
margin-left:0;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">testing ></a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">testing ></a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
.
Bookmarks