Проблема совместимости с браузером HTML и CSS

Question

Я изначально создал свою навигацию в Chrome, в которой результат идеально подходит для моих нужд. Затем я узнал, что Mozilla Firefox не выдаст тот же результат, выпадающие меню в разделе «Действие элемента» и «Связанный с администратором» будут отображаться вертикально, а не по горизонтали, как я хотел. Однако мое самое большое разочарование заключалось в проверке навигации в Internet Explorer, которая даже не покажет раскрывающееся меню. Я бы очень признателен, если кто-то проверит приведенный ниже код и ваши отзывы, спасибо.

Решил проблему, изменив одну из строк в css;

навигация ul li {float: слева; список-стиль: нет; }

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

Попробуйте http://jsfiddle.net/Vf3AJ/

Пример из: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html

EDITED Неправильный горизонтальный вертикальный. в IE10, FF и Chrome

В качестве примечания стороны: горизонтальные меню имеют серьезные проблемы в зависимости от ширины экрана зрителя.

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>