Click here to Skip to main content
13,050,242 members (105,072 online)
Rate this:
Please Sign up or sign in to vote.
See more:
I have a menu in the master page as

                      <ul id="nav">
                          <li><a href="#">Home</a></li>

                          <li><a href="#">Portfolio</a></li>
                          <li><a href="#">Contact</a>
                                  <li><a href="#">International</a></li>
                                  <li><a href="#">Corporate</a>
                                          <li><a href="#">International</a></li>
                                          <li><a href="#">Corporate</a></li>
                                          <li><a href="#">American Offices</a></li>
                                  <li><a href="#">American Offices</a></li>
                          <li><a href="#">Mission Statement</a></li>
                          <li><a href="#">Portfolio</a></li>


#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;
#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;

/* Submenu */
.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; /* for IE6 */
#nav li ul li a {
 width: 150px;
 display: block;
/* SUBSUB Menu */
#nav li ul li ul {
 display: none;
#nav li ul li:hover ul {
 left: 100%;
 top: 0;

/*#nav li ul*/ 

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
Posted 14-Mar-13 20:48pm
sri senthil kumar 15-Mar-13 2:51am
Increase the z-index for submenu class hope it will work
aassaahh 15-Mar-13 2:56am
thanks sri senthil kumar is working for me
sri senthil kumar 15-Mar-13 5:22am
You're welcome
Tadit Dash 15-Mar-13 6:04am
Can u add one answer saying the same ?
And reply to the OP to mark that as an answer, so that the question will not be in unanswered list.


1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Increase the z-index for submenu class to make menu come over the other divs

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170713.1 | Last Updated 15 Mar 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100