导航下拉菜单 html/css


不使用js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="show.css"/>
</head>
<body>
<nav>
    <ul id="first">
        <li class="one"><a href="">選單 1</a>
            <ul>
                <li class="two">
                    <a href="">選單 1-1</a>
                    <ul>
                        <li class="three"><a href="">選單 1-1-1</a></li>
                        <li class="three"><a href="">選單 1-1-2</a></li>
                    </ul>
                </li>
                <li class="two"><a href="">選單 1-2</a>
                       <ul>
                        <li class="three"><a href="">選單 1-2-1</a></li>
                        <li class="three"><a href="">選單 1-2-2</a></li>
                    </ul></li>
                <li class="two"><a href="">選單 1-3</a></li>
            </ul>
        <li class="one">
            <a href="">選單 2</a>
            <ul>
                <li class="two">
                    <a href="">選單 2-1</a>
                    <ul>
                        <li class="three"><a href="">選單 2-1-1</a></li>
                        <li class="three"><a href="">選單 2-1-2</a></li>
                    </ul>
                </li>
                <li class="two"><a href="">選單 2-2</a></li>
                <li class="two"><a href="">選單 2-3</a></li>
            </ul>

        <li class="one"><a href="">選單 3</a>
            <ul>
                <li class="two">
                    <a href="">選單 3-1</a>
                    <ul>
                        <li class="three"><a href="">選單 3-1-1</a></li>
                        <li class="three"><a href="">選單 3-1-2</a></li>
                    </ul>
                </li>
                <li class="two"><a href="">選單 3-2</a></li>
                <li class="two"><a href="">選單 3-3</a></li>
            </ul>
        <li class="one"><a href="">選單 4</a>
            <ul>
                <li class="two">
                    <a href="">選單 4-1</a>
                    <ul>
                        <li class="three"><a href="">選單 4-1-1</a></li>
                        <li class="three"><a href="">選單 4-1-2</a></li>
                    </ul>
                </li>
                <li class="two"><a href="">選單 4-2</a></li>
                <li class="two"><a href="">選單 4-3</a></li>
            </ul>

        </li>
    </ul>
</nav>
</body>
</html>

li{
    background:blue;
    width:100px;
    height:50px;
    line-height: 50px;
    list-style: none;
    position:relative;
    text-align:center;
    border:0.1px white solid;
}
li:hover{
    background: lightblue;
}
a{
    color:white;
    font-size:20px;
    text-decoration: none;
}
.one{
    display:inline-block;
}
ul{
    display:none;
}
#first{
    display: block;
}
li.one:hover >ul{
    display:block;
    position:absolute;
    left:-40px;
    top:100%;
}
li.two:hover >ul{
    display:block;
    position:absolute;
    left:60%;
    top:0px;
}



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

导航下拉菜单 html/css

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭