Navigation bar doesnt work in IE and FF

[manbec]

body {
    margin: 0px;
    padding: 0px;
}

.clear {
    clear: both;
}

#menu {
    position: absolute;
    left: 50%;  
    bottom: 85.125%;
    z-index: 100;

    height: 100px;
    margin-top: -200px;

    width: 300px;
    margin-left: -150px;
}
.kroppen {

    font-family: serif;
    position: absolute;
    left: 50%;
    width: 865px;
    margin-top: 197px;
    margin-left: -450px;
    padding: 25px;
    color: #000;
    /*margin-left: -266px;*/
    border: 1px solid #ccc;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
850
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;
}
h1, h2 {
    font-family: sans-serif;
    font-weight: normal;
}

.text { 
text-align: center; 
}
#kartan {
    width: 850;
    height: 
}


<div id="menu">
            <nav>
                    <!-- 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>
            </nav>
            </div>

The navigation bar doesnt work in Firefox and IE, but works in Chrome and Safari.

[JorgeM]

It doesnt appear to work properly in either Chrome or IE. Try adding modifying this part of your CSS to get the results shown in the picture...

ul#nav li:hover ul {
    display:block;
    position:relative;
    left:20px;
}

[Dani]

Is line 41 a typo?

[manbec]

Thank you for the reply!

I dont have edited the CSS yet. It works on my computer and the laptop.

EDIT: I added the part you posted. No difference, still a problem.

[manbec]

Dani: Is line 41 a typo?

Yes, its fixed now.

[manbec]

Anyone?

[manbec]

I noticed that none of the CSS works in FF and IE. Why is that happening?

[JorgeM]

If you CSS is external to the page, its probably because you are not referencing it properly. When i copied you code, I used internal styles (within <style> tags)

[manbec]

I use external css to the page. I tried with style tags within the elements. It rendered the page well, but the drop down menu doesnt work. I dont understand why the page renders with internal style.
I double-check my CSS code and referencing is not an issue. What it seems like.

[manbec]

Maybe it could be the selectors, element#selector.

[JorgeM]

Not sure, the picture I posted above is what was rendered when i used your code example and made that one change.

If you are looking to create a horizontal navigation menu, I have some samples you are free to look at and use for your own needs..

Online example: Multi-level Navigation Menu with CSS