html5/Css3 导航样式

来源：互联网发布：放置江湖武功数据排行编辑：程序博客网时间：2024/05/17 01:33
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>导航</title>    <style>        *{            margin: 0px;            padding: 0px;        }        .clear:after{            content: "\200B";            display: block;            clear: both;        }        div{            width: 1000px;            height: 40px;            background: #666666;            margin: 200px auto;            border-radius: 5px;        }        li{            list-style: none;        }        .u1{            display: inline-block;            float: left;        }        .u2{            float: left;            display: inline-block;        }        .u3{            float: left;            display: inline-block;        }        .u4{            /*float: left;*/            display: inline-block;        }        li{            width: 100px;            height: 40px;            line-height: 40px;            text-align: center;            font-size: 15px;            color: white;        }        .title1:hover{            background: red;        }        .child1{            background: #666666;            display: none;        }        .u1:hover .child1{            display: block;        }        .title2:hover{             background: red;         }        .child2{            background: #666666;            display: none;        }        .u2:hover .child2{            display: block;        }        .title3:hover{            background: red;        }        .child3{            background: #666666;            display: none;        }        .u3:hover .child3{            display: block;        }        .title4:hover{            background: red;        }        .child4{            background: #666666;            display: none;        }        .u4:hover .child4{            display: block;        }    </style></head><body>    <div class="clear">        <ul class="u1">            <li class="title1">首页</li>            <li>                <ul class="child1">                    <li>公司简介</li>                    <li>公司文化</li>                    <li>关于我们</li>                    <li>联系我们</li>                </ul>            </li>        </ul>        <ul class="u2">            <li class="title2">项目</li>            <li>                <ul class="child2">                    <li>安卓</li>                    <li>苹果</li>                    <li>测试</li>                    <li>Php</li>                </ul>            </li>        </ul>        <ul class="u3">            <li class="title3">项目</li>            <li>                <ul class="child3">                    <li>安卓</li>                    <li>苹果</li>                    <li>测试</li>                    <li>Php</li>                </ul>            </li>        </ul>        <ul class="u4">            <li class="title4">项目</li>            <li>                <ul class="child4">                    <li>安卓</li>                    <li>苹果</li>                    <li>测试</li>                    <li>Php</li>                </ul>            </li>        </ul>    </div></body></html>
阅读全文
0 0