navigation ul li {float：left;列表样式：无; }

Question

我最初在Chrome中创建了导航，其结果完全符合我的需求。然后我发现Mozilla Firefox不会输出相同的结果，Member Action和Admin Related下的下拉菜单将垂直显示，而不是水平显示。然而，我最大的失望是测试Internet Explorer中的导航，它甚至不会显示下拉菜单。我非常感谢有人检查以下代码和您的反馈，谢谢。

通过更改css;

中的一行来解决问题

navigation ul li {float：left;列表样式：无; }

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>

HTML和CSS浏览器兼容性问题

navigation ul li {float：left;列表样式：无; }

1 个答案: