After searching for a solution and coming up empty-handed, I have decided to ask a question. The drop-down menu on my computer and other devices at home works perfectly in Chrome but not 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>