Css制作导航菜单
CSS网页布局入门教程12：纵向导航菜单
CSS网页布局入门教程12：纵向导航菜单纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。
先看一下效果吧！如图所示的效果，我们先看一下代码结构：<div id="nav"><h1>CSS</h1><h2><a href="#">css入门</a></h2><h2><a href="#">css进阶</a></h2><h2><a href="#">css高级</a></h2><h1>webUI</h1><h2><a href="#">理论知识</a></h2><h2><a href="#">实战应用</a></h2><h2><a href="#">高级技巧</a></h2><h1>DOM</h1><h2><a href="#">DOM入门</a></h2><h2><a href="#">DOM应用</a></h2><h2><a href="#">DOM与浏览器</a></h2><h1>XHTML</h1><h2><a href="#">参考手册</a></h2><h2><a href="#">交流论坛</a></h2></div>从以上可以看出，这次的XHTML部分的代码横向代码略有不同，我们没有继续使用u l和li标签，其实继续使用ul元素也能完好的实现纵向导航系统，但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉，开拓更多的设计思想。
一步步教大家编写酷炫的导航栏js+css实现
⼀步步教⼤家编写酷炫的导航栏js+css实现⼀步⼀步的学习制作导航栏，⽂章末尾再做个综合页⾯，分享给⼤家⼀个炫酷的导航栏供⼤家参考，具体内容如下1.当前页⾯⾼亮显⽰的导航栏⾸先是HTML代码,很简单,ul+li实现菜单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>导航栏⼀</title></head><body><header class="header"><div class="nva"><ul class="list"><li><a href="Android.html">Android</a></li><li><a href="C++.html">C++</a></li><li><a href="IOS.html">IOS</a></li><li><a href="Java.html">Java</a></li><li><a href="Ruby.html">Ruby</a></li></ul></div></header><h1>⾸页</h1></body></html>基本效果:接下来设置CSS属性,这⾥要注意标签a是⾏级元素,所以需要⽤display转成块级元素,这个很常⽤,还有就是line-height的常见⽤法*{ margin:0; padding: 0; }a{ text-decoration: none; }.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }.list li{ float: left; }.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }.list li a:hover{ background:#333; color:#fff; }.list li a.on{ background:#333; color:#fff; }h1{ margin: 20px auto; text-align: center; }实现的效果:最后就是JS动态添加定位效果了js⾥⾯这样考虑,页⾯跳转就会有链接,根据链接的后缀来匹配属性,匹配则更改样式即可达到想要的效果需要注意的就是如何获取URL,如何从URL⾥⾯查找出href信息$(function(){//当前链接以/分割后最后⼀个元素索引var index = window.location.href.split("/").length-1;//最后⼀个元素前四个字母,防⽌后⾯带参数var href = window.location.href.split("/")[index].substr(0,4);if(href.length>0){//如果匹配开头成功则更改样式$(".list li a[href^='"+href+"']").addClass("on");//[attribute^=value]：匹配给定的属性是以某些值开始的元素。
一款纯css实现的漂亮导航菜单（也适用于个人中心）
⼀款纯css实现的漂亮导航菜单（也适⽤于个⼈中⼼） 今天给⼤家分享⼀款纯css实现的漂亮导航。
之前为⼤家分享过jquery实现的个⼈中⼼导航菜单，今天这款也是适合放在个⼈中⼼。
还带来图标，效果不错。
⼀起看下效果图： 实现的代码。
html代码：XML/HTML Code复制内容到剪贴板1. <div class="l-main">2. <div class="menu">3. <header class="menu__header">4. <h1 class="menu__header-title">5. Incoming Messages</h1>6. </header>7. <div class="menu__body">8. <ul class="nav">9. <li class="nav__item"><a href="https://" class="nav__item-link is-active">10. <i class="fa fa-envelope nav__item-icon"></i><span class="nav__item-text">News</span>11. <span class="badge badge--warning">32</span> </a></li>12. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-flag nav__item-icon">13. </i><span class="nav__item-text">Priority</span> <span class="badge">8</span> </a>14. </li>15. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">16. </i><span class="nav__item-text">Assigned</span> <span class="badge">0/17</span> </a>17. </li>18. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-archive nav__item-icon">19. </i><span class="nav__item-text">Archived</span> <span class="badge">3</span> </a>20. </li>21. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-trash nav__item-icon">22. </i><span class="nav__item-text">Deleted</span> <span class="badge">9</span> </a>23. </li>24. <li class="nav__item"><a href="https://" class="nav__item-link"><span class="nav__item-text">25. Show all</span> </a></li>26. </ul>27. </div>28. </div>29. <div class="menu menu--small">30. <header class="menu__header">31. <h1 class="menu__header-title">32. Incoming</h1>33. </header>34. <div class="menu__body">35. <ul class="nav">36. <li class="nav__item"><a href="https://" class="nav__item-link is-active"><i class="fa fa-envelope nav__item-icon">37. </i><span class="badge badge--warning">32</span> </a></li>38. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-flag nav__item-icon">39. </i><span class="badge">8</span> </a></li>40. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-space-shuttle nav__item-icon">41. </i><span class="badge">0/17</span> </a></li>42. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-archive nav__item-icon">43. </i><span class="badge">3</span> </a></li>44. <li class="nav__item"><a href="https://" class="nav__item-link"><i class="fa fa-trash nav__item-icon">45. </i><span class="badge">9</span> </a></li>46. <li class="nav__item"><a href="https://" class="nav__item-link"><span class="nav__item-text">47. Show all</span> </a></li>48. </ul>49. </div>50. </div>51. </div> css代码：CSS Code复制内容到剪贴板1. body2. {3. background: #F4F4F4;4. font-family: Arial, sans-serif;5. font-size: 14px;6. font-weight: lighter;7. }8.9. .l-main10. {11. width: 530px;12. margin: 0 auto;13. }14.15. .menu16. {17. width: 250px;18. margin: 40px;19. background: #fff;20. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);21. border-radius: 5px;22. float: left;23. }24.25. .menu__header26. {27. background: #4B4F55;28. border-bottom: 1px solid #353A40;29. border-radius: 5px 5px 0 0;30. }31.32. .menu__header-title33. {34. color: #fff;35. padding: 15px;36. text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);37. }38.39. .menu__body40. {41. border-radius: 0 0 5px 5px;42. }43.44. .menu--small45. {46. width: 110px;48.49. .nav50. {51. list-style: none;52. }53.54. .nav__item55. {56. position: relative;57. }58.59. .nav__item-link60. {61. padding: 10px 15px;62. text-decoration: none;63. color: #8B8E93;64. display: block;65. border-bottom: 1px solid #F0F0F0;66. }67. .nav__item-link:hover68. {69. background: #f0f0f0;70. }71. .nav__item-link.is-active72. {73. background: #6E757F;74. color: #fff;75. border-bottom-color: #4B4F55;76. box-shadow: 0 1px 0 #7A828D inset;77. }78. .nav__item-link.is-active:after79. {80. content: '';81. display: block;82. position: absolute;83. top: 50%;84. rightright: -6px;85. margin-top: -6px;86. border-top: 6px solid transparent;87. border-bottom: 6px solid transparent;88. border-left: 6px solid #6E757F;89. }90. .nav__item-link.is-active .nav__item-icon91. {92. color: #fff;93. }94. .nav__item:last-child .nav__item-link95. {96. border-bottom: none;97. }98.99. .nav__item-icon100. {101. color: #D2D5DA;102. width: 20px;103. text-align: center;104. font-size: 18px;105. margin-right: 10px;106. }107.108. .badge110. font-size: 12px;111. padding: 2px 8px;112. border: 1px solid #D1D1D1;113. border-radius: 10px;114. position: absolute;115. top: 10px;116. rightright: 15px;117. }118.119. .badge--warning120. {121. background: #ED373F;122. border-color: #ED373F;123. } 以上就是今天分享的⼀款纯css实现的漂亮导航。
CSS3二级导航菜单制作步骤详解
动画定义好后，可以挺直将动画样式引用到 ul.submenu 上，注重，假 如用法的是 animate.css，那么上述步骤将省略，挺直用其提供好的 动画样式即可。
小程序 微信 企业站
第 9 页 共 10 页
本文转载自中文网
第 10 页 共 10 页
CSS3 二级导航菜单制作步骤详解
假如想要实现网页的二级导航，我们可以用法 JS 技术，动态的显示和 躲藏二级菜单，固然也可以用法 CSS 技术来实现。并且这里推举用法 CSS，由于其效率更高，更流畅。这里将介绍二级菜单的动态显示与躲 藏。 1 结构 普通导航的主体我们主要是用法 ulli 标签
首页
background-color:ededed;
body{margin:0;font-size:14px;color:666}
}
ul,ol{margin:0;padding:0;list-style:none;}
/*一级导航浮动*/
a{text-decoration:none;color:666;}
ul.menu::after{
/*一级导航*/
content:&39;&39;;
第 4 页 共 10 页
display:block; clear:both; } ul.menu>li{ float:left; width:120px; line-height:3em;
height:3em; text-align:center; cursor:pointer; } /*二级导航项分割线*/ ul.submenu{ /*默认躲藏*/
第 5 页 共 10 页
display:none; } ul.submenu>li{ border-bottom:1pxsolidfff; } /*内容区*/ .content{
很漂亮的蓝色经典CSS导航菜单代码
很漂亮的蓝⾊经典CSS导航菜单代码代码简介：很不错的⼀款蓝⾊风格经典的CSS导航菜单，只不过⽤到了⼏张背景图⽚，好像这些图⽚可以合并起来⽤，有兴趣⽤的朋友可以适当优化⼀下，从外观上来看，这款菜单还是⾮常好看的。
代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>很漂亮的蓝⾊经典CSS导航菜单代码_⽹页代码站()</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><style type="text/css">body{margin:20px 0 0 0; padding:0px; font-size:12px; font-family:""; line-height:20px; background:#fff;}div{margin:0 auto; padding:0px;}h1,h2,h3,h4,h5,h6,ul,li,dt,dl,dd,form,p{margin:0px; padding:0px; list-style-type:none;}img{border:none;}.f_l{float:left;}.f_r{float:right;}.tl{text-align:left;}.tr{text-align:right;}.tc{text-align:center;}.clearing{clear:both; height:0px; line-height:0px; overflow:hidden;}.pos{position:relative;}.dis{display:block;}.marg{margin-top:-1px;}.block{width:933px; height:auto;}.border_1{border:1px solid #999;}.blank9{height:9px; line-height:9px; clear:both; overflow:hidden;}.f1{color:#0066cc; text-decoration:underline;}.f2{color:#ff0000;}.f3{color:#ff0000; font-weight:bold;}.f4{color:#0066cc;}.f5{color:#cc6633;}.f_weight{ font-weight:bold; color:#333333; font-size:14px;}.fLink{color:#dc1a00; text-decoration:none;}#top{height:69px;}#top img{margin-left:20px;}#top .text{color:#b1b1b1; position:absolute; right:0px; bottom:12px;}#top .text a{color:#b1b1b1; text-decoration:none;}#nav{width:933px; height:30px; background:url(/images/20090920/0_navBg.gif) repeat-x lefttop;}#nav span{width:4px; height:30px; display:block; background:url(/images/20090920/0_bg.gif)no-repeat 0 0;position:absolute; left:0px; top:0px;}#nav span.right{background:url(/images/20090920/0_bg.gif) no-repeat -5px 0;position:absolute; left:929px; top:0px;}#nav .navBox{background:url(/images/20090920/0_dhling.gif) no-repeat left top; padding-left:1px;}#nav a{display:block; width:99px; height:30px; line-height:30px; font-size:13px; color:#fff; font-weight:bold;background:url(/images/20090920/0_dhbg.gif) no-repeat left top; float:left; text-align:center; text-decoration:none;}#nav a:hover,#nav .cur{display:block; width:99px; height:30px; line-height:30px; font-size:13px; color:#fff;font-weight:bold;background:url(/images/20090920/0_dhbg1.gif) no-repeat left top; float:left; text-align:center; text-decoration:none;}</style></head><body><div id="nav" class="pos"><span class="right"></span><div class="navBox f_r"><a href="/" class="cur">⽹站⾸页</a><a href="/">Ajax</a><a href="/">脚本资源</a><a href="/">电⼦书籍</a><a href="/">⽅案及⽂档</a><a href="/">⼯具软件</a></div></div></body></html><br><p><a href="">⽹页代码站</a> - 最专业的代码下载⽹站 - 致⼒为中国站长提供有质量的代码！</p>。
css样式模板代码
css样式模板代码在网页设计中，样式模板是非常重要的一部分。
它们决定了网页的外观和布局，帮助我们创建一个美观、易于导航和易于阅读的网站。
CSS样式模板是一种复用性较高的代码，能够快速而方便地为网站添加样式，而且也可以通过修改来改变网站的整体风格。
本文将介绍一些常见的CSS样式模板代码，供大家参考。
1.导航菜单导航菜单是网站的核心组成部分之一，要让用户快速找到他们想要的内容。
以下是一个简单的CSS样式模板，可以用来创建一个水平导航菜单。
```ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333; }li {float: left;}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none; }li a:hover {background-color: #111; }```使用这个样式模板，我们可以在HTML中创建一个无序列表，并添加相应的链接来创建一个简单的导航菜单。
然后，为这个无序列表添加CSS样式，使它呈现出一个黑色背景和白色的字体。
当用户悬停在链接上时，链接的背景将变成深灰色，以给用户某种反馈。
2.按钮按钮是网站中的另一个重要元素，通常用于触发某种操作，例如提交表单或打开模态窗口。
以下是一个可以用来创建漂亮按钮的CSS样式模板。
```.button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}```用这个样式模板，我们可以在HTML中创建一个按钮，并添加相应的链接来触发事件。
淘宝导航栏CSS代码
.menu-list .menu .title{color:yellow;}
8、所有分类的文字颜色（最左边那个）,
.all-cats .link .title{colቤተ መጻሕፍቲ ባይዱr:yellow;}
小结：其实原来默认文字的颜色也挺好的
第三部分、分类下的颜色
9、二级分类的背景色，设为灰色
size:14px;font-weight:500;}
a:hover
{ //鼠标滑过效果
text-decoration:none;background:#C0D9D9;font-size:14px;font-weight:500;}
.skin-box-bd
{ //导航框
background-image:none;
3、导航条整个分类段背景色，还是要设为红色，整体布局好看些
.skin-box-bd .menu-list{background:red;}
注意观察，最右边还有一丝地方没有变
4、导航条背景色（是最底层了吧），修补导航右侧缺口，再设为红色
.skin-box-bd{background:red;}
小结：有点成功感了！换换其它颜色试试看吧
.popup-content{background:gray;}
10、三级分类的背景色，我设为深灰色
.popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
11、二级分类的文字颜色，设为黄色
.popup-content .cat-name{color:yellow;}
color:green;
display:block;background:#C0D9D9;}
纯CSS实现导航栏下划线跟随滑动效果
纯CSS实现导航栏下划线跟随滑动效果⽼规矩先上张图，如何使⽤纯 CSS 制作如下效果？在继续阅读下⽂之前，你可以先缓⼀缓。
尝试思考⼀下上⾯的效果或者动⼿尝试⼀下，不借助 JS ，能否巧妙的实现上述效果。
OK，继续。
这个效果是我在业务开发的过程中遇到的⼀个类似的⼩问题。
其实即便让我借助 Javascript ，我的第⼀反应也是，感觉很⿇烦啊。
所以我⼀直在想，有没有可能只使⽤ CSS 完成这个效果呢？定义需求我们定义⼀下简单的规则，要求如下：假设 HTML 结构如下：<ul><li>不可思议的CSS</li><li>导航栏</li><li>光标⼩下划线跟随</li><li>PURE CSS</li><li>Nav Underline</li></ul>导航栏⽬的 li 的宽度是不固定的当从导航的左侧 li 移向右侧 li ，下划线从左往右移动。
同理，当从导航的右侧 li 移向左侧 li ，下划线从右往左移动。
实现需求第⼀眼看到这个效果，感觉这个跟随动画，仅靠 CSS 是不可能完成的。
如果想只⽤ CSS 实现，只能另辟蹊径，使⽤⼀些讨巧的⽅法。
好，下⾯就借助⼀些奇技淫巧，使⽤ CSS ⼀步⼀步完成这个效果。
分析⼀下难点：宽度不固定第⼀个难点， li 的宽度是不固定的。
所以，我们可能需要从 li 本⾝的宽度上做⽂章。
既然每个 li 的宽度不⼀定，那么它对应的下划线的长度，肯定是是要和他本⾝相适应的。
⾃然⽽然，我们就会想到使⽤它的 border-bottom 。
li {border-bottom: 2px solid #000;}那么，可能现在是这样⼦的（li 之间是相连在⼀起的，li 间的间隙使⽤ padding 产⽣）：默认隐藏，动画效果当然，这⾥⼀开始都是没有下划线的，所以我们可能需要把他们给隐藏起来。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Css制作导航菜单除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站.在以前做网站导航时,往往依赖于图像,表格,和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的显示.比如说一个用户把浏览器的javascript关闭掉,或者在一个只能读纯文字的手持设备--它们将无算从你的网站读到所有的数据.如果你的委拖人不注重这方面,那么告诉他繁杂的菜单会阻止搜索引擎的排名.(木木:像禅意花园就是一个不错的CSS网站.)使用CSS可以创建一个更有吸引力的导航,因为CSS没有和文本混合在一起,所以确保了导航的可访问性和使那些手持设备也可以读出.在这个教程里我们将看到一个基于CSS的导航.基于CSS的网站会加快网页加载的时间,这样基于图像的导航将渐渐的被淘汰掉.导航的结构先看效果图:导航的本质是让浏览者更好的访问你的网站,所以要建立有意义的语义.使CSS和语义相符合,为了以后方便维护.注意要避免现有浏览器的不兼容.解决方案下面是导航的HTML和CSS的代码,效果如图.这是创建导航的HTML代码=========================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" lang="en-US"> <head><title>Lists as navigation</title><meta http-equiv="content-type" c /><link rel="stylesheet" type="text/css" href="listnav1.css" /> </head><body><div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div></body></html>============================使用CSS给上面代码添加效果=====================#navigation {width: 200px;}#navigation ul {list-style: none;margin: 0;padding: 0;}#navigation li {border-bottom: 1px solid #ED9F9F;}#navigation li a:link, #navigation li a:visited {font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}======================分析:先创建一个无序列表的导航条,并做好导航链接.========================<ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul>========================然后用一个div把这个无序列表包含起来.===========================<div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div>==============================在浏览器中显示默认的样式.接下来我们要做的第一件事是给这个div定义宽度. ===================#navigation {width: 200px;}=====================给列表添加样式,去掉默认的圆点和清除填充.========================#navigation ul {list-style: none;margin: 0;padding: 0;}========================在浏览器中显示:给li标签添加一个下划线==========================#navigation li {border-bottom: 1px solid #ED9F9F;}==============================给链接添加样式:===============================#navigation li a:link, #navigation li a:visited {font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}=============================在上面可以看到这个CSS是添加了左右边框,并且使对象块状,这样做的效果使链接看起来像一个按扭.这种效果看起来像是给导航添加一个图片似的.使用CSS创建一个没有图像和javascript的导航.导航功能常常具有翻转的效果:比如说一个浏览者把鼠标放在按扭上,按扭就会显示出另一张图片,来突出效果.要实现这个效果,则要两张图像和javascript.解决方案:使用CSS来创建上面的那个效果比用图像来创建要简单的多.在CSS要现实翻转这个效果用到hover伪类选择器.我们给上面的事例加个翻转的效果:=============================#navigation li a:hover {background-color: #711515;color: #FFFFFF;=============================效果如图:我们可以看到使用CSS来实现这个效果是非常简单的.在这个例子里我只是改下翻转的背景的颜色.你可以在翻转时改变边框,和文字的颜色.在现代的浏览器中,比如说IE7,你可以给任何对象添加:hover伪类选择器.但是在IE6以下版本却不能这样使用.在老式的版本中只充许锚文本可以点击,因此用户只能点击到文字,而不是背景.我们如何解决这个问题,这里有一个黑客的方法:扩大链接的宽度.===============* html #navigation li a {width: 100%;}=============================如何使用CSS创建一个副导航到目前为止例子所建的是一个水平的导航,但有时我们需要在水平下添加一个副导航.我们给例子再增加嵌套并添加其CSS样式.============================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" lang="en-US"><head><title>Lists as navigation</title><meta http-equiv="content-type"c /><link rel="stylesheet" type="text/css" href="listnav_sub.css" /></head><body><div id="navigation"><ul><li><a href="#">Recipes</a><ul><li><a href="#">Starters</a></li><li><a href="#">Main Courses</a></li><li><a href="#">Desserts</a></li></ul></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div></body></html>#navigation {width: 200px;}#navigation ul {list-style: none;margin: 0;padding: 0;}#navigation li {border-bottom: 1px solid #ED9F9F;}#navigation li a:link, #navigation li a:visited {font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}#navigation li a:hover {background-color: #711515;color: #FFFFFF;}#navigation ul ul {margin-left: 12px;}#navigation ul ul li {border-bottom: 1px solid #711515;margin:0;}#navigation ul ul a:link, #navigation ul ul a:visited {background-color: #ED9F9F;color: #711515;}#navigation ul ul a:hover {background-color: #711515;color: #FFFFFF;}============================效果如图:分析:嵌套列表是一个很好的方式来描述导航系统.在这个例子我们用了第一个列表来表示主菜单,而子菜单则包含在主菜单的下面.这样如没有CSS样式,结构也是非常的清晰.在主菜单<li>对象包含一个列表:============================<div id="navigation"><ul><li><a href="#">Recipes</a><ul><li><a href="#">Starters</a></li><li><a href="#">Main Courses</a></li><li><a href="#">Desserts</a></li></ul></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div>===========================在html中如果没有添加CSS的话,那么嵌套列表将继续主菜单的CSS样式,靠左边浮动,所以要添加个空白,与主菜单有一定的距离.=========================#navigation ul ul {margin-left: 12px;}=======================接下来我们再给嵌套里的<li><a>对象添加样式.========================#navigation ul ul li {border-bottom: 1px solid #711515;margin: 0;}#navigation ul ul a:link, #navigation ul ul a:visited {background-color: #ED9F9F;color: #711515;}#navigation ul ul a:hover {background-color: #711515;color: #FFFFFF;}=================================。