CSS Hover Drop-down Menu In Internet Explorer
Solution 1:
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.
Solution 2:
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)
Solution 3:
<!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>
Solution 4:
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?
Post a Comment for "CSS Hover Drop-down Menu In Internet Explorer"