Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET HTML5/CSS
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;
}
 

/* 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
v2
Comments
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.
 
Thanks,
Tadit

1 solution

Rate this: bad
good
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
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 277
1 Maciej Los 210
2 BillWoodruff 205
3 Jochen Arndt 180
4 Sergey Alexandrovich Kryukov 165
0 OriginalGriff 5,130
1 DamithSL 4,157
2 Maciej Los 3,650
3 Kornfeld Eliyahu Peter 3,460
4 Sergey Alexandrovich Kryukov 2,811


Advertise | Privacy | Mobile
Web02 | 2.8.141216.1 | Last Updated 15 Mar 2013
Copyright © CodeProject, 1999-2014
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