ASP.NET pure css menu with IE7 hover problem fix
ASP.NET pure css menu with IE7 hover problem fix:What happens in IE7 is, that the submenu appears just as long as the mouse hovers over the parent menu item. So once you move the cursor downwards over the submenu, the submenu simply disappears.The drop down menu works in Firefox, but randomly disappears in IE. drop down menus using Javascript to begin with, however, I always recommend using CSS over javascript, unless you need some animation effects (because CSS renders faster then JS and it does not require the browser to have javascript turned on).
in my case i have changed .menu3 li ul a:hover
1. CSS code
The classic CSS :hover syntax for drop down menus looks like this:
1 2 | #menu li ul{display:none}/*all submenus are hidden*/#menu li:hover ul{display:block}/*a submenu appears once the user hovers o |
1. CSS code
.menu3 ul{
/*background:url(images/menu3-bg.gif) top left repeat-x;
height:43px;*/
list-style:none;
margin:0;
padding:0;
color: Blue;
font-family: Gill Sans MT !important;
font-size: medium;
}
.menu3 li{
float:left;
}
.menu3 li a /*level1 menu */
{
color: Blue;
font-family: Gill Sans MT !important;
font-size: medium;
margin-right: 1px;
padding: 13px 20px 10px 20px;
/*color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;*/
}
.menu3 li a:hover{
/*color:#000000;
text-decoration:none;
color: Blue;
font-family: Gill Sans MT !important;
font-size: medium;
padding: 0px 3px 2px 2px;*/
}
.menu3 li ul /*level2 Menu*/
{
padding: 0px 0px 0px 0px;
background-color: #E0FFFF;
color: #333333;
font-family: Gill Sans MT !important;
font-size: medium;
/*background:#e0e0e0;*/
border-top:1px solid #0079b2;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
/*height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;*/
/*width:150px;*/
/*z-index:200;*/
/*top:1em;
/*left:0;*/
}
.menu3 li:hover ul{
display:block;
}
.menu3 li li {
display:block;
float:none;
/*width:150px;*/
}
.menu3 li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu3 li ul a:hover{
background:#ffffff;
background-image :url("images/transparent1pix.png") repeat;
/*color:#000000;
opacity:1.0;
filter:alpha(opacity=100);*/
}
.menu3 p{
clear:left;
}
.menu3 #current{
/*background:url(images/current-bg.gif) top left repeat-x;*/
font-weight:bold ;
color:#000000;
}
2. Code in aspx file
<asp:Panel ID="Panel1" runat="server">
<div class="menu3">
<ul>
<li><a href="Default.aspx" >Home</a></li>
<li><a href="#" id="current">Material Diversion</a>
<ul>
<li><a href="http://10.0.0.165/prims/default.aspx?loadreport=material_diversion_all">Material Diversions</a></li>
<li><a href="http://10.0.0.165/prims/default.aspx?loadreport=material_diversion_from">Mat Div : From Proj</a></li>
<li><a href="http://10.0.0.165/prims/default.aspx?loadreport=material_diversion_to">Mat Div : To Proj</a></li>
</ul>
</li>
<li><a href="#">Civil Fronts</a>
<ul>
<li><a href="http://10.0.0.165/prims/default.aspx?loadreport=fronts">Reports</a></li>
</ul>
</li>
<li><a href="#">Comm.Prog.2011-12</a>
<ul>
<li><a href="http://10.0.0.165/prims/default.aspx?loadreport=fronts">Reports</a></li>
</ul>
</li>
<li><a href="#" id="A1">Update</a>
<ul>
<li><a href="http://10.0.0.165/prims/default.aspx?loadreport=material_diversion_all">Material Diversions</a></li>
<li><a href="http://10.0.0.165/prims/default.aspx?loadreport=material_diversion_from">Mat Div : From Proj</a></li>
<li><a href="http://10.0.0.165/prims/default.aspx?loadreport=material_diversion_to">Mat Div : To Proj</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Logout</a></li>
</ul>
</div>
</asp:Panel>
- Vinod Kotiya
www.vinodkotiya.com
Comments