(I HAVE SINCE UPDATED THE CODE TO REFLECT THE WORKING CODE. THE CODE BELOW WORKS NOW)
Ive been working on trying to position a submenu. For the record, I have done my homework over the last week trying to make this work but I think I am messing up somewhere with my parent/child relationships.
What I am trying to do is place a menu in a column on a page, then, when hovering, have a submenu appear to its right hand side. THE PROBLEM is that my menu appears but when I resize the page, it the submenu jumps all over the place. It looks like my relative and absolute positions are the problems but I cant see where
Here is my CSS code:
#col1
{
background-color:#000033;
width:15%;
height:100%;
float:left;
color:#FFF000;
font-family: bold;
font-size: 100%;
}
ul.nav li
{
position:relative;
float:left;
width:100%;
}
ul.nav a
{
display: block;
background-color:#B2B2D9;
margin-right:3%;
margin-bottom:1%;
margin-left:1%;
text-decoration:none;
border-top-color:#FFFFFF;
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
border-top-width: 3%;
border-right-width: 3%;
border-bottom-width: 3%;
border-left-width: 3%;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 2%;
}
ul.nav
{
position:relative;
list-style-type: none;
padding-left:0px;
line-height:1.5em;
}
ul.nav2 a
{
display: block;
background-color:#000033;
border:solid 3px black;
padding:5%;
margin-right:0px;
margin-bottom:0%;
margin-left:0%;
text-decoration:none;
color:white;
border-top-color:#FFFFFF;
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
}
ul.nav2
{
position:absolute;
top:0;
left:100%;
display:none;
font-size:100%;
list-style-type: none;
width:8em;
line-height:1.5em;
float: none;
clear: none;
margin: 0px;
}
ul.nav2 li
{
display:block;
margin-left:-2.8em;
width:100%;
line-height:1.3em;
}
Here is my HTML and JavaScript:
<script>
$(document).ready(function () {
$('.nav').hover(function (e) {
$('.nav2').slideDown('normal');
}, function () {
$('.nav2').slideUp('normal');
});
});
</script>
</head>
<body>
<div id="banner">
<img src="images/banner.jpg" width="100%" alt="banner" />
</div>
<div id="wrapper">
<div id="col1">
<ul class="nav">
<li><a href="http://www.ahome.com">Home</a></li>
<li><a href="http://www.ab.com">About</a></li>
<ul class="nav2">
<li><a href="http://www.albio.com">Bio</a></li>
<li><a href="http://www.acred.com">Credentials</a></li>
<li><a href="http://www.aled.com">Education</a></li>
</ul>
<li><a href="http://www.anew.com">New Listings</a></li>
<li><a href="http://www.afeat.com">Featured Home</a></li>
<li><a href="http://www.atow.com">Town Facts</a></li>
<li><a href="http://www.acme.com">Contact Me</a></li>
</ul>
</div>
<div id="main">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
</div>
</div>
</body>
</html>
As you can see, my menu is the problem. Can someone get me pointed in the right direction?
You might need this way. If you are able to change the HTML and tweak the CSS a little, you can achieve this.
<ul class="nav">
<li>
<a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */