关闭

导航下拉菜单 html/css

标签: 导航下拉菜单导航前端css
151人阅读 评论(0) 收藏 举报


不使用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;
}



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:153次
    • 积分:15
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档
    阅读排行
    评论排行