css实现横向下拉菜单_html/css_WEB-ITnose-tutoriel HTML-php.cn

css实现横向下拉菜单_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 12:18:05

original

1224 Les gens l'ont consulté

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>

Copier après la connexion

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

回复讨论(解决方案)

初步帮楼主整理了下，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{                height: 31px;                position: relative;                list-style: none;                margin: 0px;                padding: 0px;            }            .father li{                cursor: pointer;                float: left;                padding: 5px;                margin-right: 5px;            }            .father li a{                text-decoration: none;            }            .father li:hover ul{                display: block;            }            .son{                display: none;                background-color: red;                height: 30px;                list-style: none;                margin: 0px;                padding: 0px;                margin-top: 5px;            }            .son li{                cursor: pointer;                padding: 5px;                float: left;                margin-right: 5px;            }            .son li:hover{                background-color: blue;            }        </style>    </head>    <body>        <div class="horizontallyMenu">            <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>        </div>    </body></html>

Copier après la connexion