一.效果图

二.内容、要求

学习完HTML5+CSS之后，可以考虑设计并实现一个导航栏菜单，对某个项目比如你的个人书籍按类别（硬件类、软件类、语言类、网络类等分法）进行分门别类，其中上面括号中的类别为导航栏的一级菜单，它们各自的二级菜单是你所拥有的或知道的几本可能的属于这些类别的具体书籍。

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" type="text/css" href="12.css"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>二级导航栏</title>
</head>
<div id="menu"><ul><li> <a href="" class="nodrop">个人书籍</a></li><li><a href="" class="drop">硬件类</a><div class="dropdown_1column"><div class="col_1"><ul class="simple"><li><a href="">数字通信</a></li><li><a href="">通信原理</a></li><li><a href="">计算机网络</a></li></ul></div></div></li><li><a href="" class="drop">软件类</a><div class="dropdown_1column"><div class="col_1"><ul class="simple"><li><a href="">企业应用架构</a></li><li><a href="">算法导论</a></li><li><a href="">编译原理</a></li></ul></div></div></li><li><a href="" class="drop">语言类</a><div class="dropdown_1column"><div class="col_1"><ul class="simple"><li><a href="">中国语情年报</a></li><li><a href="">隶变研究</a></li><li><a href="">辞书学纲要</a></li></ul></div></div></li><li><a href="" class="drop">网络类</a><div class="dropdown_1column"><div class="col_1"><ul class="simple"><li><a href="">网络技术基础</a></li><li><a href="">网络工程师教程</a></li><li><a href="">图解HTTP</a></li></ul></div></div></li></ul></div></body>
</html>

css代码

li{list-style-type: none;
}
#menu {width: 740px;margin: 30px auto 0px;height: 45px;background-color: #424242;
}
#menu li{float: left;width: 92px;line-height:39px;text-align: center;position:relative;border:none;
}
#menu li a {font-size:16px; color: #F4F4F4;display:block;outline:0;text-decoration:none;
}
#menu li:hover a {color: #ff6700; /*导航栏文字颜色 */
}
#menu li:hover .dropdown_1column {left:0px;top:38px;
}
.dropdown_1column{ /* 下拉菜单边框颜色*/margin: 0px auto;float: left;position: absolute;left: -999em;text-align: left;border: 1px solid #424241;border-top: none;background: #F4F4F4;width: 92px;
}
#menu li:hover div a { /* 下拉菜单文字颜色*/
font-size:12px
;color:#333;
}#menu li:hover div a:hover{color:#ff6700;} /*下拉带单鼠标停留颜色*/#menu li ul {list-style:none;padding:10px 5px;
margin:0;
}
#menu li ul li {font-size:12px;
line-height:26px;
position:relative;
padding:0;margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {background:none;
border:none;padding:0;
margin:0;
}

HTML+CSS实现导航栏二级下拉菜单图书案例相关推荐

鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
【HTML+CSS】实现网页的导航栏和下拉菜单
熟练的使用导航栏,对于任何网站都非常重要,我们可以使用CSS转换为好看的导航栏而不是枯燥的HTML菜单.同时,我们使用 CSS 可以创建一个鼠标移动上去后显示下拉菜单的效果. 水平导航栏: 垂直导航栏 ...
CSS导航栏及下拉菜单
导航栏对于一个网站来说非常重要,熟练地使用CSS可以转换成好看的导航栏而不是枯燥的HTML菜单.导航栏基本上是一个链接列表,所以使用 <ul></ul>和 <li> ...
CSS样式：小米商城导航栏及下拉菜单小项目
小米商城一.Html网页二.CSS美化样式三.成果图一.Html网页 <!DOCTYPE html> <html lang="en"><hea ...
解决鼠标移动导航栏，下拉菜单就会消失的问题
这个太坑了特此写一篇博客记录 $(".product_guid").mouseover(function(){ $(".first_guid") ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
这次仿写的是安居客的首页导航栏,要求实现二级下拉菜单首先,这是原网页的效果接下来是html部分 <div class="box1"><ul id=" ...
html二级下拉导航,html -----二级下拉导航的实现（常用）
该楼层疑似违规已被系统折叠隐藏此楼查看此楼二级下拉菜单 DEMOS zero dollars wrapping text MENUS spies menu vertical menu LAYOUT ...

HTML+CSS实现导航栏二级下拉菜单图书案例

一.效果图

二.内容、要求

html代码

css代码

HTML+CSS实现导航栏二级下拉菜单图书案例相关推荐

最新文章

热门文章