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

WBOY
Freigeben: 2016-06-24 12:18:05
Original
1224 Leute haben es durchsucht

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>
Nach dem Login kopieren

这是我的代码 但是在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>
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage