css实现横向下拉菜单_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

回复讨论(解决方案)

집

웹 프론트엔드

HTML 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:18 PM

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下不一样哪位大牛帮忙解决一下谢谢

回复讨论(解决方案)

初步帮楼主整理了下，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>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.