Careimmesee
New Member
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.HTML \[code\]<div id="navigationContainer"> <!-- A navigation container is created in order to store the navigation and differ the navigation background from the body background --><div id="navigation"> <!-- A navigation div is created in order to create a navigation including drop down menu and then style it in external css file --><ul><li class="borderleft"><a href="http://stackoverflow.com/questions/15744906/homepage.jsp">Home</a> </li> <!-- A borderleft class is given to this listed element in order to style a border for it in the external CSS file. --><li><a href="http://stackoverflow.com/questions/15744906/Registration.jsp">Register</a> </li><li><a href="http://stackoverflow.com/questions/15744906/searchCar.jsp">Search cars</a></li><li><a href="http://stackoverflow.com/questions/15744906/DisplayAll.jsp">Display all cars</a></li> <li><a href="http://stackoverflow.com/questions/15744906/#">Member Actions</a><ul> <!-- Open drop down menu --><li class="bordertop"><a href="http://stackoverflow.com/questions/15744906/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="http://stackoverflow.com/questions/15744906/Member.jsp">Member Area</a></li><li><a href="http://stackoverflow.com/questions/15744906/ReserveCar.jsp">Reservation</a></li></ul> <!-- Close drop down menu --></li> <!-- Close tips listed element --><li><a href="http://stackoverflow.com/questions/15744906/ContactUs.jsp">Contact us</a></li><li><a href="http://stackoverflow.com/questions/15744906/#">Admin Related</a><!-- Open tips listed element --><ul> <!-- Open drop down menu --><li class="bordertop"><a href="http://stackoverflow.com/questions/15744906/braking.html">Insert new car</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><a href="http://stackoverflow.com/questions/15744906/weather.html">Delete a car</a></li></ul> <!-- Close drop down menu --></li> <!-- Close tips listed element --></ul></div> <!-- navigation closed --></div><!-- navigationContainer closed --></BODY></HTML>\[/code\]CSS\[code\]* {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;} \[/code\]