Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
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 21:48pm
sri senthil kumar at 15-Mar-13 2:51am
Increase the z-index for submenu class hope it will work
aassaahh at 15-Mar-13 2:56am
thanks sri senthil kumar is working for me
sri senthil kumar at 15-Mar-13 5:22am
You're welcome
Tadit Dash at 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
0 Sergey Alexandrovich Kryukov 8,478
1 OriginalGriff 6,516
2 Peter Leow 3,567
3 Zoltán Zörgő 3,351
4 Richard MacCutchan 2,397

Advertise | Privacy | Mobile
Web01 | 2.8.150123.1 | Last Updated 15 Mar 2013
Copyright © CodeProject, 1999-2015
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