CSS dropdown menu doesn't work in IE and Firefox
Question
I've been looking around for a solution and didnt find anything. Therefore I am asking a question. The drop down menu works in Chrome in my computer and other devices (computers and laptops) at home. Except in Firefox and IE.
#menu {
position: absolute;
left: 50%;
bottom: 85.125%;
z-index: 100;
height: 100px;
margin-top: -200px;
width: 300px;
margin-left: -150px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
ul#nav li {
background: #fff;
float: left;
}
ul#nav li a {
display: block;
text-decoration: none;
border-bottom: 1px solid #ccc;
color: #000;
padding: 5px 15px;
}
ul#nav li a:hover {
background: #aaa;
}
ul#nav li ul li {
float: none;
}
ul#nav li ul {
position: absolute;
display: none;
}
ul#nav li:hover ul {
display:block;
}
body {
margin: 0px;
padding: 0px;
}
<body>
<header>
<!-- input for header text-->
</header>
<div id="menu">
<!-- input for the navigation menu -->
<ul id="nav">
<li><a href="hem.html" id="hem">Hem</a></li>
<li>
<a href="#" id="browsers">Browsers</a>
<ul>
<li><a href="chrome.html">Chrome</a></li>
<li><a href="firefox.html">Firefox</a></li>
<li><a href="ie.html">IE</a></li>
<li><a href="opera.html">Opera</a></li>
</ul>
</li>
<li><a href="data.html" id="data"> Data</a></li>
<li><a href="synpunkt.html" id="synpunkt">Synpunkt</a></li>
</ul>
</div>
</body>
3 answers
solution1
3 2013-06-14 04:34:56
Two reasons,
1) Your HTML has an error, these lines --
<li><a>href="chrome.html">Chrome</a></li>
<li><a>href="firefox.html">Firefox</a></li>
should be
<li><a href="chrome.html">Chrome</a></li>
<li><a href="firefox.html">Firefox</a></li>
And
2) Your ul has id navbar , but in css you're using #nav as the selector. So either change the id or change the selector in css.
Check the Test Link
EDIT: Screenshots !! :)
Firefox:
IE9:
if this is not correct, please explain what is not correct.
solution2
0 2013-06-14 04:31:40
Your HTML is broken:
<li><a>href="chrome.html">Chrome</a></li>
<li><a>href="firefox.html">Firefox</a></li>
should be
<li><a href="chrome.html">Chrome</a></li>
<li><a href="firefox.html">Firefox</a></li>
But I can't get this working in Chrome anyway. Can you replicate the issue in a JSFiddle ?
solution3
0 2013-06-14 06:50:12
Try using this code for css, in ie press f12 and make sure that browser mode and document mode is both set to ie9.
EDIT: Header should look like this.
<!doctype>
<html>
<head>
<meta charset=utf-8>
<title>Index</title>
<link rel="stylesheet" href="css/style.css">
</head>
#menu
{
position: relative;
top: 50px;
left: 800px;
display: inline-block;
}
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
ul#nav li
{
background: #fff;
float: left;
position: relative;
}
ul#nav li a
{
display: block;
text-decoration: none;
border-bottom: 1px solid #ccc;
color: #000;
padding: 5px 15px;
}
ul#nav li a:hover
{
background: #aaa;
}
ul#nav li > ul li
{
float: none;
}
ul#nav li > ul
{
left: 3px;
position: absolute;
top: 29px;
display: none;
}
ul#nav li:hover ul {
display:block;
}
body
{
margin: 0px;
padding: 0px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.