Hi,
I have a menu in the master page as
<div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">International</a></li>
<li><a href="#">Corporate</a>
<ul>
<li><a href="#">International</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">American Offices</a></li>
</ul>
</li>
<li><a href="#">American Offices</a></li>
</ul>
</li>
<li><a href="#">Mission Statement</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
css
#nav {
margin: 0; padding: 0;
}
#nav li a, #nav li {
float: left;
}
#nav li {
list-style: none;
position: relative;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: #262626;
background: #ffff00;
border-top: 0px solid #545454;
font-family:Calibri;
font-size:1opx;
}
#nav li a:hover {
background: #003b80;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
color: #fff;
}
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
}
#nav li:hover > ul {
display: block;
}
#nav li ul li, #nav li ul li a {
float: none;
}
#nav li ul li {
_display: inline;
}
#nav li ul li a {
width: 150px;
display: block;
}
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
}
I have a home page ,where i have image banner ,the problem is when i mouse over on the menu main
item the sub-menu item are going inside the div (image banner).
My Menu is working properly.
I am not able to understand why submenu are hovering inside the image banner (div).
Please help