导航下拉菜单 html/css

原创 2016年05月30日 23:42:24


不使用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、javascript和JQuery三种方法实现导航条下拉菜单的炫酷效果

分别采用Html+css、javascript和JQuery三种方法实现导航条下拉菜单的炫酷效果

纯css的导航下拉菜单

  • 2008年12月25日 10:14
  • 1KB
  • 下载

采用jquery+css实现极酷的下拉菜单导航

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 【荐】采用jq...

css3导航下拉菜单

中国站长天空-网页特效-导航菜单-纯CSS3实现的宽屏二级下拉导航菜单 与之间--> .container{position:relative;width:1100px;margin:0 auto...

网易商城CSS下拉菜单导航 [收藏]

网易商城CSS下拉菜单导航 .nav { CLEAR: both; Z-INDEX: 10; BACKGROUND: #b91313; MARGIN-LEFT: 40px; WIDTH: 800p...

纯CSS实现下拉菜单导航

用纯CSS实现下拉菜单导航条,当鼠标hover到按钮上时,下方出现4个下拉菜单导航条。...

屌炸天-css3水平导航下拉菜单

1. 简介 参考:http://designmodo.com/css3-dropdown-menu/ 本人重新定义了css的样式, 得到了适合自己的css文件 2. 原css文件 s...

使用CSS制作简单的下拉菜单导航,用的是hover,js下次在分享

使用CSS制作简单的下拉菜单导航 - Liehuo.Net *{margin:0; padding: 0;} body { background:#444;} #navcont { backgrou...

利用CSS实现下拉菜单导航

视频教程
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导航下拉菜单 html/css
举报原因:
原因补充:

(最多只允许输入30个字)