创建一级导航栏

使用 ul li 创建一个无序列表，即为一级导航栏

<ul><li><a href="#">首页</a></li><li><a href="#">学校概况</a></li><li><a href="#">师资队伍</a></li><--!省略多个li标签-->
</ul>

#表示在当前页面，不跳转页面
这个时候一级导航栏为纵排，同时，前面会出现黑色小圆点,我们使用下面的方法

.nav ul{/*让小黑圆点不显示*/list-style: none;
}
.nav ul li {/* 对其菜单项左浮动，呈横向排列 */float: left;
}

此时，文字处于顶部（使用line-height垂直居中），没有间距（采用display：flex 同时让flex=1平分,这时就不需要左浮动了）

.nav ul{list-style: none;width: 1000px;height: 44px;line-height: 44px;display: flex;
}
.nav ul li {flex: 1;text-align: center;color: white;font-weight: bold;
}

由于要创建二级导航栏，所以我们一级导航栏就不再需要a标签

<div class="nav"><ul class="menu"><li>首页</li><li>学校概况</li>

创建二级导航栏

在一级导航栏的基础上，只需要再加入

即可

<div class="nav"><ul class="menu"><li>首页</li><li>学校概况<ul><li><a href="#">学院简介</a></li><li><a href="#">学院工作团队</a></li><li><a href="#">学院大事记</a> </li></ul></li><li>师资队伍<ul><li><a href="#">教学团队</a></li><li><a href="#">学院工作团队</a></li><li><a href="#">学院大事记</a></li></ul></li>

1.隐藏二级菜单栏

2.让二级菜单在鼠标放在一级菜单项时才会出现

3.清除二级菜单的浮动

/* 隐藏二级菜单 */
.nav ul li ul {display: none;position: absolute;
}/* 让二级菜单在点击一级菜单项时才会出现 */
.nav ul li:hover ul {display: block;
}/* 清除二级菜单的浮动 */
.nav ul li ul li {float: none;width: 100px;background: lightskyblue;
}

##总的代码

<div id="header"><div><img src="topbg.jpg" alt=""></div><div class="nav"><ul class="menu"><li>首页</li><li>学校概况<ul><li><a href="#">学院简介</a></li><li><a href="#">学院工作团队</a></li><li><a href="#">学院大事记</a> </li></ul></li><li>师资队伍<ul><li><a href="#">教学团队</a></li><li><a href="#">学院工作团队</a></li><li><a href="#">学院大事记</a></li></ul></li><li>人才培养<ul><li><a href="#">培养方案</a></li><li><a href="#">导师简介</a></li><li><a href="#">认证培训</a></li></ul></li><li>招生就业<ul><li><a href="#">招生专业</a></li><li><a href="#">就业政策</a></li><li><a href="#">就业信息</a></li></ul></li><li>科研动态<ul><li><a href="#">科研成果</a></li><li><a href="#">科研团队</a></li><li><a href="#">科研机构</a></li></ul></li><li>学生工作<ul><li><a href="#">团委&学生会</a></li><li><a href="#">学工信息</a></li><li><a href="#">学生管理</a></li></ul></li><li>党建工作<ul><li><a href="#">党员活动</a></li><li><a href="#">工会活动</a></li><li><a href="#">教代会</a></li></ul></li><li>办公平台<ul><li><a href="#">教务平台</a></li><li><a href="#">网站管理</a></li></ul></li></ul></div></div>

/* 头部样式 */
#header {padding:0;text-align: center;margin: 0 auto;
}/* 导航条 */
.nav {width: 1000px;height: 44px;background-color: dodgerblue;margin: 0 auto;border-radius: 5px;
}/* 整个导航栏的宽高 */
.nav .menu {width: 1000px;/* 导航栏居中 */margin: 0 auto;height: 100%;box-sizing: border-box;
}
.nav ul{list-style: none;width: 1000px;height: 44px;line-height: 44px;display: flex;
}
.nav ul li {flex: 1;text-align: center;color: white;font-weight: bold;
}.nav ul li a:visited{display: inline-block;width: 238px;height: 40px;line-height: 40px;color: #fff;text-align: center;background: dodgerblue;
}
/* 设置菜单项里文字点击的效果颜色 */
.nav ul li a:hover,
.nav ul li a:active {background: lightskyblue;
}/* 隐藏二级菜单 */
.nav ul li ul {display: none;position: absolute;
}/* 让二级菜单在点击一级菜单项时才会出现 */
.nav ul li:hover ul {display: block;
}/* 清除二级菜单的浮动 */
.nav ul li ul li {float: none;width: 100px;background: lightskyblue;
}/* 链接 - 修改颜色 */
.nav a:hover {background-color: #ddd;color: red;
}

使用HTMLcss创建二级导航栏相关推荐

elementUI使用v-for创建无限级导航栏—— 递归组件
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. elementUI使 ...
Django横向二级导航栏（鼠标悬空事件）
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/html" ...
vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
二级导航栏（html、css)
二级导航栏(html.css) 效果图: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><m ...
【Web前端二级导航栏】
简单的Web前端二级导航栏示例: <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
使用css实现二级导航栏
1.今日用css实现二级导航栏,在csdn上看了各种奶妈级的代码,终于倒腾出来了 2.话不多说,上效果图: 3.html代码如下: ```<!DOCTYPE HTML> <html ...
HTML+CSS 创建京东导航栏
使用HTML+CSS 搭建京东首页导航栏,主要实现的功能: 静态部分以及鼠标移入显示下拉列表信息位置和向下图标使用Font Awesome图标字体库 <!DOCTYPE html> &l ...
用css简单实现二级导航栏
display:none 可以隐藏元素 display:block 不仅可以让行内元素转变成块级元素还可以显示元素实例 CSS样式 <style>* {margin: 0;paddin ...
html+css创建侧边导航栏
效果: 代码: .left{position: fixed;width: 250px;height: 2000px;background-color: rgb(100, 93, 93);float ...
HTMLCSS设计小米导航栏
小米导航栏: 准备工作: 把需要实现的设计图放到ps中,量取需要的宽度高度间距值: 话不多说:直接上代码: <div class="box"> // 一个大盒子可以用n ...

使用HTMLcss创建二级导航栏

使用HTML&css创建二级导航栏

创建一级导航栏

创建二级导航栏

使用HTMLcss创建二级导航栏相关推荐

最新文章

热门文章