日期:2014-05-17  浏览次数:20648 次

css实现横向下拉菜单
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
    body{
        color: black;
    }
    .father{
        height: 31px;
        background-color: grey;
        position: relative;
    }
    .father li{
        float: left;
        margin-right: 5px;

    }
    .son{
        display: none;
        background-color: red;
        height: 30px;
        top: 31px;
        left: 0px;

    }
    .father li:hover ul{
        display: block;
    }
    .son li{
        float: left;
        margin-right: 5px;
    }
</style>
</head>
<body>
<ul class="father">
    <li>first</li>
    <li>
        <a href="#">father</a>
        <ul class="son">
            <li>son1</li>
            <li>son1</li>
            <li>son1</li>
        </ul>
    </li>
</ul>
</body>
</html>

这是我的代码 但是在chrome和ie下不一样 哪位大牛帮忙解决一下 谢谢
css

------解决方案--------------------
初步帮楼主整理了下,IE7+和谷歌差不多,一般直接CSS样式控制的横向下拉菜单不是很好,最好是通过JS来控制,希望对楼主有所帮助。


<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>横向菜单</title>
        <style type="text/css">
            .horizontallyMenu{
                padding: 10px;
                border: 1px solid red;
            }
            .father{
                heigh