包含逐步说明的纯html CSS下拉菜单

顺晟科技

2022-09-15 21:30:40

216

话不多说，直接上图：（最后附上完整代码文本）

第一张图：html代码

第二张图：css代码

第三张图：效果展示

以上就是比较简单的纯css+html下拉菜单

不够好看？需要着急，咱们来美化一下！！！

先上代码：

最后效果：

对就是这么简单，但是你写的每一行代码，你都要知道他的用！！！

上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>纯css+html下拉列表</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>纯CSS+HTML下拉导航制作教程</h1>
<nav>
<ul class="nav_menu">
    <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称1</a></li>
    <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称2</a></li>
    <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称3</a>
        <ul class="nav_submenu">
            <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称3.1</a></li>
            <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称3.2</a></li>
        </ul>
    </li>
    <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称4</a>
        <ul class="nav_submenu">
            <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称4.1</a></li>
            <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称4.2</a></li>
            <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称4.3</a></li>
        </ul>
   </li>
    <li class="nav_menu_item"><a href="http://www.baidu.com/">栏目名称</a></li>
</ul>
</nav>
</body>
</html>



css部分：

/*设置一下背景颜色*/

body{  background-color: #0add6a; font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial,
"Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB",
"Hiragino Sans GB W3", "FontAwesome", sans-serif;}

h1{text-align:center;color:#f1f1f1;padding-top:120px;}
nav{width: 780px; margin: 0px auto;height: 50px;line-height: 50px;font-size: 20px;}
.nav_menu{  list-style-type: none; background-color: rgba(0, 0, 0, 0.2); }
a{  text-decoration: none; color:#ffffff; padding: 0px 20px; }
.nav_menu_item{  display: inline-block;  position: relative;}
.nav_menu_item:hover{background-color: rgba(44, 40, 55, 0.42);}
.nav_submenu{ margin: 0px;padding: 0px; display: none;  position: absolute;
    text-transform: none; list-style-type: none;background-color: rgba(0, 0, 0, 0.2);  }
.nav_submenu .nav_menu_item{width: 200px;float: left;}
.nav_menu .nav_menu_item:hover .nav_submenu{  display: block; }

希望对各位看官有用；


                             分享，成长

上一篇：Html5+Css3制作下拉菜单的三下一篇：HTML CSS写下拉菜单