Hi, I have reworked your code which is below but here are the main points I want you to realize.
You had your structure something like this for the dropdown
Code:
<li><a href="#">About</a></li>
<ul class="sub-menu">
<li>About Sub Menu1</li>
<li>About Sub Menu2</li>
<li>About Sub Menu3</li>
</ul>
Now, notice that the <li> at the very top gets CLOSED right after that anchor, THEN the dropdown comes into play. The nested <ul> needs to still be a child of the <li> to work. Well, it makes it easier proper 
.
Now, also you should note that floating and absolute positioning never work together. Absolute positioining wins out. You had an element in your above CSS which had both. Now, also note that you are using a bad way of hiding/showing elements. Display:none/block si bad for screen readers and the only real good way to hide/show elements for a dropdown is to use a huge negative left margin to hide the dropdown, and on hover, set that margin to 0. In the below example I have commented briefly what changes I made in the CSS. The HTML all I changed was the positioning of the ending <li> which I already showed an example above. Hopefully you can study this example because thsi is basically all that you'll ever need for learning how a dropdown truely works. That's partly why your CSS wasn't working above, is because of your improper nesting. You weren't targeting anything .
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Test</title>
<link rel='stylesheet' href='new.css' />
<style type="text/css">
* { margin: 0; padding: 0; }
body { font-family: Georgia, serif; background: #bababa; font-size:10px;}
li {list-style: none;
float:left;}
/*Main Navigation Bar-------------------------------*/
#nav_main{
background:url(navmain.png) 0 0 repeat-x;
width:1000px;
height:30px;
border-top: 1px solid #3b3b3b;
border-bottom:1px solid #3b3b3b;
font-size:1.5em;
line-height:1.4em;
font-family:arial;
font-weight:bold;
color: white;
text-transform:uppercase;
margin:0 auto;
}
#nav_main ul {
padding-top:4px;
float:left;
margin-left:40px;
}
#nav_main li {
padding-right: 2em;
}
/*Menu list styling*/
#mainMenu {
clear:both;
zoom:1;
text-align:left;
text-transform:uppercase;
}
#mainMenu a {
color:#DEF;
text-shadow:0 0 2px #004;
text-decoration:none;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#FFF;
text-shadow:0 0 4px #04C;
}
#nav_main ul ul.sub-menu {
position:absolute;
left:0;
top:0;/*these are coordinates so that the browser does not guess where to place*/
margin-left:-999em;/*add this. and remove float:left*/
}
#nav_main ul li
{
position:relative;/*stacking context for dropdown*/
}
#nav_main ul li li
{
position:static;/*reset*/
}
#nav_main ul li:hover ul.sub-menu
{
/*these styles to be applied on hover*/
top:100%;/*visual*/
background:red;/*see it*/
margin-left:0;/*mvoe back on screen*/
}
</style>
</head>
<body>
<!-- Navigation Main Start-->
<div id="nav_main">
<ul id="mainMenu">
<li><a href="#">Home</a>
<ul class="sub-menu">
<li>Home Sub Menu1</li>
<li>Home Sub Menu2</li>
<li>Home Sub Menu3</li>
</ul> </li>
<li><a href="#">About</a>
<ul class="sub-menu">
<li>About Sub Menu1</li>
<li>About Sub Menu2</li>
<li>About Sub Menu3</li>
</ul>
</li>
</ul>
</div>
<!-- Navigation Main End -->
</body>
</html>
I bolded the selectors I changed. You can read the comments and change around postioning as you see fit. Hope I was able to help you .
Reply With Quote
Bookmarks