CSS hover drop-down menu in Internet Explorer
Trying to create a website that looks as good in Internet Explorer as it does in Firefox is an incredibly difficult task. However, there is at least one bug in IE that is particularly perplexing for our team. The drop-down menu displays fine in Firefox and Chrome, but looks completely whack in Explorer.
This image shows what the menu's look like while browsing in Firefox and Explorer, respectively. Please click the link to see the image.
http://i1025.photobucket.com/albums/y315/brycewwilson/firefox-explorerscreenshot.png
Please help! Has anyone else encountered this problem while trying to use a menu formatted in CSS? The menu uses unordered lists and list items, and uses CSS hover to display the sub-menu contents.
Thanks in advance!
UPDATE: For some reason, the menu worked on its own in IE, but it still doesn't work on our site. Puzzling...
Here is the code.
The html follows:
<head>
<link rel="stylesheet" type="text/css" href="old_hover_menu.css"/>
</head>
<body>
<ul id="topDropDownMenu开发者_如何学JAVA">
<li id="aboutDropDown"><a href="#">About</a>
</li>
<li id="contactDropDown"><a href="#">Contact</a>
<ul>
<li><a href="#">Form</a></li>
<li><a href="#">Information</a></li>
</ul>
</li>
</ul>
</body>
and here is the css:
#topDropDownMenu {position:relative;background: no-repeat 100% 50%;width:50em;max-width:100%;float:left;}
#topDropDownMenu li ul {
width:11em !important;/* leaves room for padding */
cursor:default;
position:absolute;
height:auto;
display:none;
left:-10px;
padding:1px 10px 10px 10px;
background:url(/img/clear.gif);
}
/* All LIs */
#topDropDownMenu li {
position:relative;
width:8.3em;
max-width:16.5%;
cursor:pointer;
float:left;
list-style-type:none;
font-weight:bold;
border-style:solid;
border-width:1px;
border-color:#222;
text-align:center;
-moz-border-radius:8px 8px 0px 0px;
}
/* sub-menu LIs */
#topDropDownMenu li ul li {
width:8.3em/*FF*/;
padding:0;
border:none;
max-width:100%;
border:1px solid #333;
border-top:none;
-moz-border-radius:0px 0px 0px 0px;
}
/* All anchors */
#topDropDownMenu li a {
cursor:pointer !important;
color:#666;
text-decoration:none;
display:block;
float:left;
height:2em;
line-height:2em;
width:100%;
-moz-border-radius:8px 8px 0px 0px;
}
/* sub-menu Anchors */
#topDropDownMenu li ul li a {
width:8.3em/*FF*/;
position:relative !important;
cursor:pointer !important;
white-space:nowrap;
line-height:1.7em;
height:1.7em;
font-weight:normal;
color:#666;
background-position:0 50% !important;
-moz-border-radius:0px 0px 0px 0px;
}
/*hover*/
#topDropDownMenu li a:hover,
#topDropDownMenu li a:focus,
#topDropDownMenu li a:active {color:#000;background:#fff}
/* display and z-index for the sub-menus */
#topDropDownMenu li:hover ul,
#topDropDownMenu li.msieFix ul {display:block;z-index:10;top:2em !important;}
#topDropDownMenu li#aboutDropDown {z-index:2;}
#topDropDownMenu li#contactDropDown {z-index:1;}
.aboutDropDown #topDropDownMenu li#aboutDropDown ul,
.contactDropDown #topDropDownMenu li#contactDropDown ul { display:block;top:-1000px}
#aboutDropDown a {background-color:#b9e075;}
#contactDropDown a {background-color:#f7c472;}
#topDropDownMenu li.msieFix a {}
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus,
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active,
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus,
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:active,
{position:absolute !important;top:1028px !important;}
Without seeing some HTML and CSS there isn't a way to give you a specific solution. However, there are some techniques that can be used to help alleviate IE bugs.
- Float your
<li>s, even if they aren't horizontal. - Add
display: inlineto the now floated<li>s. - Assign a
widthto your<li>s or to the<a>tag within. - Potentially add
position: relativeto the<li>s. - Add
display: blockto the<a>tags within the<li>s. - Add
width: 100%orzoom: 1(or anything else that triggers hasLayout) to the top level<ul>.
Some of the above techniques will usually put you in a better position. Further tweaks may be necessary but hopefully IE will behave better.
I love coding everything myself too, but HTML/CSS/JS Navigation is one of those areas where you really don't need to reinvent the wheel. No matter what you want it to look like, there are a ton of ready to go solutions out there that are already tested cross browser. Suckerfish is a popular one for a pure html/css solution, but there are many more that will work just fine and will be easily styled to look however you want. (Just be sure to style the correct elements)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#topDropDownMenu {
position: relative;
background: no-repeat 100% 50%;
width: 50em;
max-width: 100%;
float: left;
}
#topDropDownMenu li ul {
width: 11em !important; /* leaves room for padding */
cursor: default;
position: absolute;
height: auto;
display: none;
left: -10px;
padding: 1px 10px 10px 10px;
background: url(/img/clear.gif);
}
/* All LIs */
#topDropDownMenu li {
position: relative;
width: 8.3em;
max-width: 16.5%;
cursor: pointer;
float: left;
list-style-type: none;
font-weight: bold;
border-style: solid;
border-width: 1px;
border-color: #222;
text-align: center;
-moz-border-radius: 8px 8px 0px 0px;
}
/* sub-menu LIs */
#topDropDownMenu li ul li {
width: 8.3em /*FF*/;
padding: 0;
border: none;
max-width: 100%;
border: 1px solid #333;
border-top: none;
-moz-border-radius: 0px 0px 0px 0px;
}
/* All anchors */
#topDropDownMenu li a {
cursor: pointer !important;
color: #666;
text-decoration: none;
display: block;
float: left;
height: 2em;
line-height: 2em;
width: 100%;
-moz-border-radius: 8px 8px 0px 0px;
}
/* sub-menu Anchors */
#topDropDownMenu li ul li a {
width: 8.3em /*FF*/;
position: relative !important;
cursor: pointer !important;
white-space: nowrap;
line-height: 1.7em;
height: 1.7em;
font-weight: normal;
color: #666;
background-position: 0 50% !important;
-moz-border-radius: 0px 0px 0px 0px;
}
/*hover*/
#topDropDownMenu li a:hover, #topDropDownMenu li a:focus, #topDropDownMenu li a:active {
color: #000;
background: #fff;
}
/* display and z-index for the sub-menus */
#topDropDownMenu li:hover ul, #topDropDownMenu li.msieFix ul {
display: block;
z-index: 10;
top: 2em !important;
}
#topDropDownMenu li#aboutDropDown {
z-index: 2;
}
#topDropDownMenu li#contactDropDown {
z-index: 1;
}
.aboutDropDown #topDropDownMenu li#aboutDropDown ul, .contactDropDown #topDropDownMenu li#contactDropDown ul {
display: block;
top: -1000px;
}
#aboutDropDown a {
background-color: #b9e075;
}
#contactDropDown a {
background-color: #f7c472;
}
#topDropDownMenu li.msieFix a {
}
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, {
position: absolute !important;
top: 1028px !important;
}
</style>
<link rel="stylesheet" type="text/css" href="old_hover_menu.css" />
</head>
<body>
<ul id="topDropDownMenu">
<li id="aboutDropDown"><a href="#">About</a></li>
<li id="contactDropDown"><a href="#">Contact</a><ul>
<li><a href="#">Form</a></li>
<li><a href="#">Information</a></li>
</ul>
</li>
</ul>
</body>
</body></html>
This barely counts as an answer, but it may help.
Cross browser compatibility can be a bit of a monster for things like this when you are using a completely custom solution. This is an instance where using a library like jquery UI will make things a ton easier on you, as they are usually already cross browser compatible.
If this is not an option, it will be impossible to help without seeing your code. What version of internet explorer are you testing with?
加载中,请稍侯......
精彩评论