HTML and CSS browser compatibility issue

Question

I have originally created my navigation in Chrome in which the outcome fits perfectly to my needs. I have then found out that Mozilla Firefox won't output the same result, the drop-down menus under Member Action and Admin Related will display vertically instead on horizontally as i wanted. However my biggest dissapointment was testing the navigation in Internet Explorer which won't even show the drop-down menus. I would really appreciate someone checking the below code and your feedback, Thanks.

Solved the problem by changing one of the lines in css;

navigation ul li {float: left; list-style:none; }

HTML

<div id="navigationContainer"> 
<div id="navigation"> 
<ul>
<li class="borderleft"><a href="homepage.jsp">Home</a> </li>
<li><a href="Registration.jsp">Register</a> </li>
<li><a href="searchCar.jsp">Search cars</a></li>
<li><a href="DisplayAll.jsp">Display all cars</a></li> 
<li><a href="#">Member Actions</a>
<ul> <!-- Open drop down menu -->
<li class="bordertop"><a href="Login.jsp">Login</a></li> 
<li class="floatLeft"><a href="Member.jsp">Member Area</a></li>
<li><a href="ReserveCar.jsp">Reservation</a></li>

<li><a href="ContactUs.jsp">Contact us</a></li>
<li><a href="#">Admin Related</a>
<ul> 
<li class="bordertop"><a href="braking.html">Insert new car</a></li>
<li><a href="weather.html">Delete a car</a></li>
</ul> 
</li> 
</ul>
</div>
</div>

</BODY>
</HTML>

CSS

* {padding: 0%; margin 0%; } /* Overwrites the browser stylesheet */



#navigationContainer {background:url(images/navi.png); width:100%;position: relative; white-space:nowrap; word-spacing:0; } 

#navigation {width:1200px; height:65px; position: relative; font-family: Arial; margin: 2px auto; font-size: 125%; } 

#navigation ul { list-style-type: none; } 

#navigation ul li {float: left; position: relative; } 

#navigation ul li a { border-right: 2px solid #e9e9e9; padding: 20px; 
display: block; margin: 0 auto; text-align: center; color: black; text-decoration: none; } 

#navigation ul li a:hover { background: blue; color: white; } 

#navigation ul li ul { display: none; } 

#navigation ul li:hover ul {display: block; position: absolute;   } 

#navigation ul li ul li {float:left; position:relative; }

#navigation ul li:hover ul li a { background: #12aeef; color: white; position:relative; margin: 0px auto; border-bottom: 1px solid white; border-right: 1px solid white; width: 119px; }

#navigation ul li:hover ul li a:hover { background: blue;} 

.bordertop { border-top: 1px solid white; } 
.borderleft { border-left: 2px solid #e9e9e9;} 

Answer 1

Try this http://jsfiddle.net/Vf3AJ/

Example from: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html

EDITED Misread horizontal for vertical. tested in IE10, FF, and Chrome

As a side note: horizontal menus have serious issues depending on the width of the viewers screen.

CSS

nav {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
}
nav li {
    list-style: none;
    float: left;
}
nav li a {
    display: block;
    padding: 3px 8px;
    text-transform: uppercase;
    text-decoration: none;
    color: #999;
    font-weight: bold;
}
nav li a:hover {
    background: blue;
    color: white;
}
nav li ul {
    display: none;
}
nav li:hover ul, nav li.hover ul {
    position: absolute;
    display: inline;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}
nav li:hover li, nav li.hover li {
    float: left;
}
nav li:hover li a, navbar li.hover li a {
    color: #000;
}
nav li li a:hover {
    color: white;
}

HTML

<div id="navigationContainer">
    <nav id="navigation">
        <ul>
            <li class="borderleft"><a href="homepage.jsp">Home</a> 
            </li>
            <li><a href="Registration.jsp">Register</a> 
            </li>
            <li><a href="searchCar.jsp">Search cars</a>

            </li>
            <li><a href="DisplayAll.jsp">Display all cars</a>

            </li>
            <li><a href="#">Member Actions</a>

                <ul>
                    <!-- Open drop down menu -->
                    <li class="bordertop"><a href="Login.jsp">Login</a>

                    </li>
                    <!-- A bordertop class is given to this listed element in order to style a top border for in in the external CSS file. -->
                    <li class="floatLeft"><a href="Member.jsp">Member Area</a>

                    </li>
                    <li><a href="ReserveCar.jsp">Reservation</a>

                    </li>
                </ul>
            </li>
            <li><a href="ContactUs.jsp">Contact us</a>

            </li>
            <li><a href="#">Admin Related</a>

                <ul>
                    <li class="bordertop"><a href="braking.html">Insert new car</a>

                    </li>
                    <li><a href="weather.html">Delete a car</a>

                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>