第八章利用CSS制作导航菜单

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

1.导航栏的创建：<nav>标签是 HIML5 新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内容整合，所以常用<nav>标签在页面上创建导航栏菜单区域。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><center><h3>简单水平菜单导航栏</h3></center><hr /><nav><ul><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li><li><a href="#">数据库</a></li><li><a href="#">操作系统</a></li><li><a href="#">服务器</a></li></ul></nav></body>
</html>

2. 列表样式的设计：此时会带有<ul>元素的默认样式，即每个列表选项前面有实心点标记，可以利用CSS 在<head>标签中进行声明，对列表样式进行改变。
例如，使用list-syie-type属性去掉默认标记。为了预防不同的浏览器会出现预设值。设置margin和paddinng属性为0，避免最终布局效果可能产生的误差;为了使列表元素能够在同一行显示，为<li>列表选项定义浮动效果。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>水平菜单导航栏的制作</title><style type="text/css">ul{list-style-type: none;}li{float: left;}</style></head><body><center><h3>简单水平菜单导航栏</h3></center><hr /><nav><ul><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li><li><a href="#">数据库</a></li><li><a href="#">操作系统</a></li><li><a href="#">服务器</a></li></ul></nav></body>
</html>

3.超链接样式的设计：利用CSS 为超链接重新设置样式，例如，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。然后将其display属性设置为bock，使得超链接成为块级元素，这样才可以为超链接设置80像素的宽度。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>水平菜单导航栏的制作</title><style type="text/css">ul{list-style-type: none;}li{float: left;}a{display: block;width: 80px;text-align: center;padding: 10px;}</style></head><body><center><h3>简单水平菜单导航栏</h3></center><hr /><nav><ul><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li><li><a href="#">数据库</a></li><li><a href="#">操作系统</a></li><li><a href="#">服务器</a></li></ul></nav></body>
</html>

4.鼠标事件：利用CSS为a:hover 和a:acive 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>利用CSS制作导航菜单</title><style type="text/css">/*列表样式的设计*/ul{list-style-type: none;}li{float: left;}/*超链接样式的设计*/a{display: block;width: 80px;padding: 10px;text-align: center;text-decoration: none;}/*鼠标事件*/a:link, a:visited{background-color: #ff0000;color: #ffffff;}a:hover, a:active{background-color: #ffffff;color: #ff0000;}</style></head><body><center><h3>简单水平菜单导航栏</h3></center><hr><nav><ul><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li><li><a href="#">数据库</a></li><li><a href="#">操作系统</a></li><li><a href="#">服务器</a></li></ul></nav></body>
</html>

8.1.2 下拉子菜单导航栏的设计与实现

1.导航栏的创建：仍然是在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表<ol>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css"></style></head><body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav></body>
</html>

2.列表样式的设计：此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用 CSS 在<head>标签中进行声明，对列表样式进行改变。同样，使用 list-style-type 属性去掉默认标记，设置 margin 和 padding 属性为0，为<li>列表选项定义浮动效果，设置text-decoration 属性 none。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">ul,ol{list-style-type: none;padding: 0;margin: 0;}ul li{float: left;}ul li ol li{float: none;}</style></head><body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav></body>
</html>

3.二级菜单的隐藏和显示设计：

为了使有序列表的二级菜单隐藏起来，需要设置 display属性为 none。

为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的 display属售block 。
为了二级菜单能在从属的一级菜单正下方显示，需要设置二级菜单的绝对定位及一级单的相对定位。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">ul,ol{list-style-type: none;padding: 0;margin: 0;}ul li{float: left;}ul li ol li{float: none;}/* 8.1.2.3 二级菜单的隐藏和显示设计 */ul li ol{display: none;}ul li:hover ol{display: block;}</style></head><body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav></body>
</html>

4.DIV样式的设计：完成以上关键步骤后，对内容所处的div样式进行设置、包括宽度、高度、边框和对齐方式。

代码如下：

<!--示例程序8.2-->
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">ul,ol{list-style-type: none;padding: 0;margin: 0;text-decoration: none;}ul li{float: left;}ul li ol li{float: none;}ul li ol{display: none;}ul li:hover ol{display: block;}ul li a{background-color: #ff0000;color: #ffffff;}ul li ol li a{background-color: #dddddd;color: #ff0000;}a{text-decoration: none;text-align: center;width: 80px;padding: 10px;display: block;}</style></head><body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav></body>
</html>

5.超链接样式的设计：利用CSS为列表超链接重新设置样式，例如，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。然后将其display属性设置为block，使得超链接成为块级元素，这样才可以为超链接设置80像素的宽度。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">ul,ol{list-style-type: none;padding: 0;margin: 0;}ul li{float: left;}ul li ol li{float: none;}/* 8.1.2.3 二级菜单的隐藏和显示设计 */ul li ol{display: none;}ul li:hover ol{display: block;}/* 8.1.2.4 DIV样式的设计 */a{text-decoration: none;text-align: center;display: block;width: 80px;padding: 10px;}/* 8.1.2.5 超链接样式的设计 */ul li a{background-color: #ff0000;color: #dddddd;}ul li ol li a{background-color: #dddddd;color: #ff0000;}</style></head><body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav></body>
</html>

6.鼠标事件：利用CSS为无序列表选项li:hover 和有序列表的a:hover 进行样式设置，表示鼠标悬停状态时的样式变化。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">ul,ol{list-style-type: none;padding: 0;margin: 0;}ul li{float: left;}ul li ol li{float: none;}/* 8.1.2.3 二级菜单的隐藏和显示设计 */ul li ol{display: none;}ul li:hover ol{display: block;}/* 8.1.2.4 DIV样式的设计 */a{text-decoration: none;text-align: center;display: block;width: 80px;padding: 10px;}/* 8.1.2.5 超链接样式的设计 */ul li a{background-color: #ff0000;color: #dddddd;}ul li ol li a{background-color: #dddddd;color: #ff0000;}/* 鼠标事件 */ul li a:hover,ul li a:visited{border-bottom: #22aaff solid 5px;font-weight: 900;}ul li ol li a:hover,ul li ol li a:visited{background-color: #ff0000;color: #dddddd;border-bottom: none;}</style></head><body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav></body>
</html>

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

1.导航栏的创建：普通的纵向导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级元素。区别于水平导航栏，纵向导航栏不需要设置列表选项<li>的浮动属性。
在<nav>的首尾标签之间使用<div>标签创建菜单范围，结合无序列表<ul>标签和列表选项<li>标签创建菜单选项。这里的超链接地址暂时设置为空链接，用户可根据实际情况改成具体的 URL地址。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫工具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></nav></body>
</html>

2.DIV样式的设计：对导航栏所处的 div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单纵向导航栏的制作</title><style type="text/css">/* 8.2.1 简单纵向导航栏的设计与实现 *//* 8.2.1.1导航栏的创建 *//* 8.2.1.2 DIV样式的设计 */#nav{background-color: #00cc33;width: 150px;padding: 10px;}h3{text-align: center;color: #eeeeee;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫工具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></nav></body>
</html>

3.列表样式的设计：此时列表选项还带有<ul>元素的默认实心圆点样式，需要使用list-style-type 属性去掉默认标记，设置 margin 和 padding的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#nav{background-color: #00cc33;width: 150px;padding: 10px;}h3{text-align: center;color: #eeeeee;}ul{list-style-type: none;margin: 0;padding: 0;}a{display: block;width: 150px;line-height: 40px;background-color: #eeeeee;color: #00cc33;text-decoration: none;text-align: center;}</style></head><body><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家具用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫用具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></body>
</html>

4.超链接样式的设计：利用 CSS 为超链接重新设置样式，对超链接的a:link和a:visiled 进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a:hover和a:active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单纵向导航栏的制作</title><style type="text/css">/* 8.2.1 简单纵向导航栏的设计与实现 *//* 8.2.1.1导航栏的创建 *//* 8.2.1.2 DIV样式的设计 */#nav{background-color: #00cc33;width: 150px;padding: 10px;}h3{text-align: center;color: #eeeeee;}/* 8.2.1.3 列表样式的设计 */ul{list-style: none;margin: 0;padding: 0;}/* 8.2.1.4 超链接样式的设计 */a{display: block;width: 150px;line-height: 40px;background-color: #eeeeee;color: #00cc33;text-decoration: none;text-align: center;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫工具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></nav></body>
</html>

5.鼠标事件：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单纵向导航栏的制作</title><style type="text/css">/* 8.2.1 简单纵向导航栏的设计与实现 *//* 8.2.1.1导航栏的创建 *//* 8.2.1.2 DIV样式的设计 */#nav{background-color: #00cc33;width: 150px;padding: 10px;}h3{text-align: center;color: #eeeeee;}/* 8.2.1.3 列表样式的设计 */ul{list-style: none;margin: 0;padding: 0;}/* 8.2.1.4 超链接样式的设计 */a{display: block;width: 150px;line-height: 40px;text-decoration: none;text-align: center;}/* 8.2.1.5 鼠标事件 */a:link,a:visited{background-color: #eeeeee;color: #00cc33;}a:hover,a:active{background-color: #00cc33;color: #eeeeee;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫工具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></nav></body>
</html>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单纵向导航栏的制作</title><style type="text/css">/* 8.2.1 简单纵向导航栏的设计与实现 *//* 8.2.1.1导航栏的创建 *//* 8.2.1.2 DIV样式的设计 */#nav{background-color: #00cc33;width: 150px;padding: 10px;}h3{text-align: center;color: #eeeeee;}/* 8.2.1.3 列表样式的设计 */ul{list-style: none;margin: 0;padding: 0;}/* 8.2.1.4 超链接样式的设计 */a{display: block;width: 150px;line-height: 30px;text-decoration: none;text-align: center;}/* 8.2.1.5 鼠标事件 */a:link,a:visited{background-color: #eeeeee;color: #00cc33;}a:hover,a:active{/* background-color: #00cc33;color: #eeeeee; */background: url(img/bg.jpg) no-repeat;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫工具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></nav></body>
</html>

8.2.2 出式子菜单导航栏的设计与实现

1.导航栏的创建：在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<u>和有序列表<ol>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

代码如下：

<!--示例程序8.4-->
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>出式子导航栏的制作</title><style type="text/css"></style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav></body>
</html>

2.DIV样式的设计：对导航栏所处的 div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

代码如下：

<!--示例程序8.4-->
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>出式子导航栏的制作</title><style type="text/css">/* 8.2.2.2 DIV样式的设计 */#nav{width: 150px;padding: 10px;background-color: lightgreen;}h3{text-align: center;color: #eeeeee;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav></body>
</html>

3.二级菜单的隐藏和显示设计：为了使有序列表的二级菜单隐藏起来，需要设置display属性为none。为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block 。
为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位及一级菜单的相对定位。

代码如下：

<!--示例程序8.4-->
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>出式子导航栏的制作</title><style type="text/css">#nav{background-color: #00cc33;width: 150px;padding: 10px;}h3{text-align: center;color: #eeeeee;}ol,ul{list-style-type: none;margin: 0;padding: 0;}ul li{position: relative;}ul li ol{display: none; 显示：无;position: absolute;top: -1px;left: 150px;}ul li:hover ol{display: block;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li>
<li><a href=“#”>冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav></body>
</html>

4.列表样式的设计：此时列表选项还带有<ul>元素的实心圆点样式，及<ol>元素的阿拉伯序号，需要使用list-style-type 属性去掉默认标记，设置 margin和 padding的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分

代码如下：

<!--示例程序8.4-->
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>出式子导航栏的制作</title><style type="text/css">#nav{background-color: #00cc33;width: 150px;padding: 10px;}h3{text-align: center;color: #eeeeee;}ol,ul{list-style-type: none;margin: 0;padding: 0;}ul li{position: relative;}ul li ol{display: none;position: absolute;top: -1px;left: 150px;}ul li:hover ol{display: block;}a{text-decoration: none;text-align: center;display: block;width: 150px;line-height: 30px;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li>
<li><a href=“#”>冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav></body>
</html>

5.超链接样式的设计：利用CSS为超链接重新设置样式，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a:hover和a:active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

代码如下：

<!--示例程序8.4-->
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>出式子导航栏的制作</title><style type="text/css">#nav{background-color: #00cc33;width: 150px;padding: 10px;}h3{text-align: center;color: #ffffff;}ol,ul{list-style-type: none;margin: 0;padding: 0;}ul li{position: relative;}ul li ol{display: none;position: absolute;top: -1px;left: 150px;}ul li:hover ol{display: block;}a{text-decoration: none;text-align: center;display: block;width: 150px;line-height: 30px;background-color: #ffffff;color: #00cc33;}ul li a:hover,ul li a:active{background: url("img/bg2.JPG");}ul li ol li a:hover,ul li ol li a:active{background-color: #00cc33;color: #ffffff;background-image: none;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav></body>
</html>

8.3 底部固定导航栏

底部导航，顾名思义是放在页脚部位，是网站设计中一种辅助导航。底部导航应用性不是很广，比较常出现在一些活动或个性化的网站当中。并且，底部导航被广泛使用的并不是在PC端中，而是在移动端。如果在PC端中采用底部导航的形式，一般都是采用固定的方式。
底部导航可以减少用户的使用成本，但对于结构复杂有二级或三级导航的网站，就不是很合适。而且，用户浏览的习惯都是从上到下、从左往右的，将导航放置底部，这样的设计比较挑战用户的使用习惯。所以，很多网站在设计的时候首页导航会放在底部，其后的导航就会固定到顶部。

1.导航栏的创建：在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<u>配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav></body>
</html>

2.列表样式的设计：此时会带有<ul>元素的默认实心点标记，可以利用1ist-style-type 属性去掉，同时设置margin和padding属性。列表选项设置foat 属性，让列表元素能够在同一行显示。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul{list-style-type: none;margin: 0;padding: 0;}li{float: left;}</style></head><body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav></body>
</html>

3.菜单固定底部的设计：为了美化文字内容的外观，可以设置div的高度、宽度、背景、边框和文本对齐方式等。为了使导航菜单始终处于页面的最上层，需要设置z-index属性的优先值。为了使导航菜单固定于页面底部，需要设置位置属性position 和各个方向的位置值。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul{list-style-type: none;margin: 0;padding: 0;}li{float: left;}a{width: 80px;display: block;padding: 10px;text-decoration: none;text-align: center;}a:link,a:visited{background-color: #0000ff;color: #ffff00;}a:hover,a:active{background-color: #ffff00;color: #0000ff;}.fix-footer{position: fixed;bottom: 0;}</style></head><body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav></body>
</html>

4.超链接样式的设计：利用CSS为超链接重新设置样式，对超链接的a:link和a:visited 进行设置，表示超链接未被访问和已访问状态。然后将其dispay属性设置为block，使得超链接成为块级元素。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul{list-style-type: none;margin: 0;padding: 0;}li{float: left;}a{width: 80px;display: block;padding: 10px;text-decoration: none;text-align: center;}a:link,a:visited{background-color: #0000ff;color: #ffff00;}a:hover,a:active{background-color: #ffff00;color: #0000ff;}</style></head><body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav></body>
</html>

5.鼠标事件：利用CSS为a:hover 和a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>底部固定导航栏</title><style type="text/css">/* 列表样式的设计 */ul{list-style-type: none;margin: 0;padding: 0;}li{float: left;}/* 超链接样式的设计 */a{display: block;width: 80px;padding: 10px;text-decoration: none;text-align: center;}/* 鼠标事件 */a:link, a:visited{background-color: #000000;color: #ffffff;}a:hover, a:active{background-color: #ffffff;color: #000000;}/* 菜单固定底部的设计 */.fix-footer{position: fixed;bottom: 0%;}</style></head><body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav></body>
</html>