1. Home
  2. Forums Index
  3. Browser Side / CSS 11:23 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

IE9 menu hover problem

         

tester88

8:52 am on Apr 30, 2013 (gmt 0)

10+ Year Member



CSS 

ul#topnav {
margin:0; padding: 0;
float: left;
height:35px;
width: 100%;
list-style: none;
position: relative;
font-size: 14px;
background:#000;
text-align:center;
top: 0px;
left: 0px;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
width:15.5%;
height:35px;
border-left: 1px solid #555;
top:0;
}
ul#topnav li a {
display: block;
padding-top:8px;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li a:hover {


font-weight:bold;

}

ul#topnav li:hover 
{ 
height:35px;
background-color: Red;
}

ul#topnav li span 
{
font-size:x-small;
padding-top:8px;
padding-bottom:8px;
float: left;
height:27px;
position:absolute;
display: none;
background-color: Red;

border-color:#637a59 #000 #000 #000 ;

border-style:solid;
border-width:0px;
color: #fff;
border-right: 1px solid #000;
}

ul#topnav li span a{
width:50px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;

display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;

}

ul#topnav li:hover span 
{ 
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;



}

ul#topnav li span a { display: inline; }
ul#topnav li span a:hover
 {
 font-weight:bolder;
 width:100%;
}


HTML 

<ul id="topnav">
<li><a href='../home.aspx'>Home</a></li>
<li><a href='#'>User</a><span><a href='../UserList.aspx'>User Setting</a>|
<a href='../Group.aspx'>Group Setting</a>|
<a href='../FTP.aspx'>FTP activation</a>
</span></li>
</ul>


Hover can work in firefox. But IE9 and IE10 can't. Anyone help?

phranque

9:39 am on Apr 30, 2013 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



welcome to WebmasterWorld, tester88!


first thing i would try is validating your html and css.

Unicorn - W3C's Unified Validator:
http://validator.w3.org/unicorn/ [validator.w3.org]

Paul_o_b

8:21 pm on Apr 30, 2013 (gmt 0)

10+ Year Member



Hi,

I assume you have a valid doctype or you send IE back to the dark ages and it behaves much like IE5 and won't understand hover on anything but anchors.

Your code works for me with a doctype: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul#topnav {
margin:0;
padding: 0;
float: left;
height:35px;
width: 100%;
list-style: none;
position: relative;
font-size: 14px;
background:#000;
text-align:center;
top: 0px;
left: 0px;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
width:15.5%;
height:35px;
border-left: 1px solid #555;
top:0;
}
ul#topnav li a {
display: block;
padding-top:8px;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li a:hover { font-weight:bold; }
ul#topnav li:hover {
height:35px;
background-color: Red;
}
ul#topnav li span {
font-size:x-small;
padding-top:8px;
padding-bottom:8px;
float: left;
height:27px;
position:absolute;
display: none;
background-color: Red;
border-color:#637a59 #000 #000 #000;
border-style:solid;
border-width:0px;
color: #fff;
border-right: 1px solid #000;
}
ul#topnav li span a {
width:50px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li:hover span {
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {
font-weight:bolder;
width:100%;
}
</style>
</head>

<body>
<ul id="topnav">
<li><a href='../home.aspx'>Home</a></li>
<li><a href='#'>User</a><span><a href='../UserList.aspx'>User Setting</a>| <a href='../Group.aspx'>Group Setting</a>| <a href='../FTP.aspx'>FTP activation</a> </span></li>
</ul>
</body>
</html>

tester88

3:47 am on May 2, 2013 (gmt 0)

10+ Year Member



Thanks. It works in my small testing HTML. but can't work in my big asp.net project.

it has 3 things in that page.

master site page, menu.ascx and home (content) page.

i tried to put doctype in master site and menu.ascx. can't work.

any idea?

tester88

6:46 am on May 2, 2013 (gmt 0)

10+ Year Member



master site page 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
.
.
.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
         <td>
          <asp:ContentPlaceHolder ID="Content_menu" runat="server">
           <mnu:ucMenu ID="ucMenu1" runat="server" />
          </asp:ContentPlaceHolder>
         </td>
        </tr>
       </table>



Menu.ascx 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
.
.
<table id="tblMenu" width="100%" border="5" align="center" cellpadding="0"
  cellspacing="0">
  <tr>
   <td>
    <ul id="topnav">
     <asp:Literal ID="lt_list" runat="server" ></asp:Literal>
    </ul>
   </td>
  </tr>
 </table>


In Menu.ascx.cs, bind data into ID "lt_list" 

string Home = "<li><a href='../home.aspx'>Home</a></li>";
  string UserMgt = "<li><a href='#'>User</a> " +
        "<span id='mnuspan'>" +
        "<a href='../UserList.aspx'>User Setting</a>| " +
         "<a href='../Group.aspx'>Group Setting</a>| " +
         "<a href='../FTP.aspx'>FTP activation</a> " +
        "</span>" +
       "</li>";

tester88

7:14 am on May 2, 2013 (gmt 0)

10+ Year Member



this is original css. the css above is that i modified to simple one. the difference between the css above and this css is

filter: progid:DXImageTransform.Microsoft.gradient(.....);
background: -webkit-gradient(.....);
background: -moz-linear-gradient(....);

CSS 

ul#topnav {
margin:0; padding: 0;
float: left;
height:35px;
width: 100%;
list-style: none;
position: relative;
font-size: 14px;
background:#000;
text-align:center;
top: 0px;
left: 0px;
}

ul#topnav li {
float: left;
margin: 0; padding: 0;
width:15.5%;
height:35px;
border-left: 1px solid #555; 
top:0;
}
ul#topnav li a {
display: block;
padding-top:8px;
color: #f0f0f0;
text-decoration: none;
height:27px;
}
ul#topnav li a:hover {
font-weight:bold;
}

ul#topnav li:hover 
{ 
height:35px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', EndColorStr='#637a59');
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#637a59)); /* for webkit browsers */
background: -moz-linear-gradient(top, #000, #637a59);
}

ul#topnav li span 
{
font-size:x-small;
padding-top:8px;
padding-bottom:8px;
float: left;
height:27px;
position:absolute;
display: none; /*--Hide by default--*/

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#637a59', EndColorStr='#000000');
background: -webkit-gradient(linear, left top, left bottom, from(#637a59), to(#000000)); 
background: -moz-linear-gradient(top, #637a59, #000000); 
border-color:#637a59 #000 #000 #000 ;
border-style:solid;
border-width:0px;
color: #fff;
border-right: 1px solid #000;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}

ul#topnav li span>a{
width:50px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;
}

ul#topnav li:hover span 
{ 
display: block;
color: #f0f0f0;
text-decoration: none;
height:27px;
}

ul#topnav li span a { display: inline; }
ul#topnav li span a:hover
 {
 font-weight:bolder;
 width:100%;
 
 
}

tester88

3:20 am on May 3, 2013 (gmt 0)

10+ Year Member



I just solved it. I tried to test it in new page and new master page. Both are fine. So I thought the fault should be in old master page, not CSS. I removed few codes from old master page and it is working now.

Thanks everyone for help.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:23 am May 1, 2026