问题描述:

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;}

网友答案:

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>
相关阅读:
Top