导航下拉菜单 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;
}



纯CSS的导航下拉菜单

写在案例前: 本案例并非原创,百度一搜“css下拉菜单”一定能看见一模一样的案例,而且不止一个,所以就仿照这个案例又自己做了一遍,并且总结一下自己遇到的一些问题结合思考给出的解决办法,虽然不...
  • chris_z_0622
  • chris_z_0622
  • 2017年04月04日 17:03
  • 4003

纯CSS实现下拉菜单导航

用纯CSS实现下拉菜单导航条,当鼠标hover到按钮上时,下方出现4个下拉菜单导航条。...
  • changerous
  • changerous
  • 2016年06月14日 22:15
  • 3789

html导航栏-简单运用display设置左拉和下拉导航栏

运用display的block设置左拉导航栏,inline-block设置下拉导航栏。 1左拉导航栏 index.html 第一级d导航 heheh ...
  • xingguanghui_1134
  • xingguanghui_1134
  • 2016年08月12日 09:01
  • 2248

24个 HTML5 & CSS3 下拉菜单效果及制作教程

下拉菜单是一个很常见的效果,在网站设计中被广泛使用。通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案。使用HTML5 和 CSS3 可以更容易创...
  • natalie86
  • natalie86
  • 2015年03月30日 20:27
  • 1715

HTML+CSS实现简单下拉菜单

HTML+CSS实现下拉菜单 使用Html+css实现简单的下拉菜单 代码: 下拉框 *{ margin:0px; padding:0px;} #nav{ width:600px; h...
  • cb2474600377
  • cb2474600377
  • 2015年03月31日 18:19
  • 17623

横向二级导航菜单(html+css+js)

/*基本信息*/ body { margin: 0; padding: 0; background: #FFFFFF; } /*导航*/ #navigation { f...
  • u011845833
  • u011845833
  • 2014年05月16日 17:22
  • 2289

HTML+CSS+JavaScript实现简易下拉菜单

html lang="en"> head> meta charset="UTF-8"> title>下拉列表title> link rel="stylesheet" href=...
  • darongzi1314
  • darongzi1314
  • 2016年09月14日 16:17
  • 837

创建一个纯CSS下拉菜单,支持三级菜单

我们将创建两个子类别特性,父悬停激活链接。 第一级sub-links主要出现在导航栏,然后第二个级的链接从第一个下拉飞出水平。 HTML 123456789101112131415161718192...
  • nature_fly088
  • nature_fly088
  • 2016年06月10日 12:33
  • 2000

HTML+CSS实战(一)——导航条菜单的制作

一、垂直导航菜单的制作 1、基本的样式清除: *{margin:0;padding:0} 2、无序列表圆点去除: ul{list-style:none} 3、下划线去除: a{text-deco...
  • mqy1023
  • mqy1023
  • 2016年03月14日 22:34
  • 7013

CSS实现三级下拉菜单分析

最近在帮同学写一个博客,由于他需要的栏目比较多,所以首页需要三级下拉菜单,从网上找一个,但是不可以直接用!由于前台没有写的太好,所以一些css代码没有看懂,所以我就分析了一下别人的代码,然后用到了自己...
  • zpf_nevergiveup
  • zpf_nevergiveup
  • 2016年11月29日 19:23
  • 700
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导航下拉菜单 html/css
举报原因:
原因补充:

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