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 产⽣）：默认隐藏，动画效果当然，这⾥⼀开始都是没有下划线的，所以我们可能需要把他们给隐藏起来。
纯html+css制作三级下拉菜单
纯html+css制作三级下拉菜单直⼊主题，html+css制作三级下拉菜单实现代码分享给⼤家，具体内容如下1.html代码XML/HTML Code复制内容到剪贴板1. <!DOCTYPE>2. <html>3. <head>4. <meta charset="utf-8">5. <title>三级下拉菜单导航栏</title>6. <link rel="stylesheet" type="text/css" href="style.css">7. </head>8. <body bgcolor="aliceblue">9. <ul class="nav">10. <li>11. <a href="" target="_blank">12. ⼿机数码<span class="triangle">▼</span></a>13. <ul>14. <li><a href="#" target="_blank">15. ⼿机 <span class="triangle">▶</span>16. </a>17. <ul>18. <li><a href="">⼩⽶</a></li>19. <li><a href="">华为</a></li>20. <li><a href="">魅族</a></li>21. </ul>22. </li>23. <li><a href="">24. 电脑 <span class="triangle">▶</span>25. </a>26. <ul>27. <li><a href="">平板</a></li>28. <li><a href="">笔记本</a></li>29. <li><a href="">台式</a></li>30. </ul>31. </li>32. <li><a href="">相机</a></li>33. </ul>34. </li>35. <li><a href="">男装⼥装<span class="triangle">▼</span></a>36. <ul>37. <li><a href="">38. 上⾐ <span class="triangle">▶</span></a>39. <ul>40. <li><a href="">衬衫</a></li>41. <li><a href="">T恤</a></li>42. </ul>43. </li>44. <li><a href="">45. 裤⼦ <span class="triangle">▶</span></a>46. <ul>47. <li><a href="">⽜仔裤</a></li>48. <li><a href="">休闲裤</a></li>49. </ul>50. </li>51. </ul>52. </li>53. <li><a href="">运动户外<span class="triangle">▼</span></a>54. <ul>55. <li><a href="">运动鞋</a></li>56. <li><a href="">运动服</a></li>57. <li><a href="">运动设备</a></li>58. </ul>59. </li>60. <li>61. <a href="">时尚百货</a>62. </li>63. <li><a href="">⽣活服务<span class="triangle">▼</span></a>64. <ul>65. <li><a href="">万能缴费</a></li>66. <ul>67. <li><a href="">⽔费</a></li>68. <li><a href="">电费</a></li>69. </ul>70. <li><a href="">教育培训</a></li>71. <li><a href="">话费充值</a></li>72. </ul>73. </li>74. <li>75. <a href=""> 汇吃美⾷</a>76. </li>77. <li>78. <a href=""> 家居家纺<span class="triangle">▼</span></a>79. <ul>80. <li><a href="">81. <span class="triangle">◀</span> 床上⽤品</a>82. <ul class="nav1">83. <li><a href="">被⼦</a></li>84. <li><a href="">枕头</a></li>85. </ul>86. </li>87. <li>88. <a href=""><span class="triangle">◀</span> 客厅家具</a>89. <ul class="nav1">90. <li><a href="">茶具</a></li>91. <li><a href="">沙发</a></li>92. <li><a href="">椅⼦</a></li>93. </ul>94. </li>95. </ul>96. </li>97. </ul>98. </body>99. </html>2.CSS 代码CSS Code复制内容到剪贴板1. *{2. padding: 0;3. margin: 0;4. }5. ul{6. list-style-type:none;7. }8. .triangle{9.10. font-size: 1em;11. color: white;12. }13. a{14. text-decoration:none;15. text-align: center;16. font-weight: bold;17.18. }19. /*⼀级导航*/20. ul.nav{21. float: left;22. border:1px solid gray;23. margin-left: 10%;24. margin-top:10px;25. border-radius: 4px;26. position: fixed;27. }28. ul.nav li{29. float: left;30. width: 9em;31. background-color:yellowgreen;32. }33. ul.nav a{34. display: block;35. color: white;36. line-height: 1.5em;37. border-right: 1px solid white;38. border-left: 1px solid white;39. padding: 5px;40. }41.42. ul.nav a:hover,43. ul.nav a:focus{44. color: black;45. background-color: #98FB98;46. opacity: 0.5;47. }48. ul.nav li:first-child a{49. border-left: 0;50. border-bottom: 0;51. }52. ul.nav li:last-child a{53. border-right: 0;54. border-bottom: 0;55. }56. /*⼆级导航*/57. ul.nav li ul{58. width: 10em;59. position: absolute;60. left: -1000em;61. }62.63. ul.nav li:hover ul{64. width: 10em;65. left:auto;66. }67.68. ul.nav li ul a{69. border-top: 1px solid white;70. border-bottom: 1px solid white;71. border-left: 0;72. border-right: 0;73.74. }75. /*三级导航*/76. ul.nav li:hover ul li ul{77. width: 10em;78. position: absolute;79. left: -1000em;80.81. }82.83. ul.nav li:hover ul li:hover ul{84. left: auto;85. margin-left: 9.1em;86. margin-top: -2.1em;87. }88. ul.nav li:hover ul li:hover ul.nav1{89. left: auto;90. margin-left: -9.1em;91. margin-top: -2.1em;92. }以上就是本⽂的全部内容，欢迎⼤家学习完善。
HTML+CSS实现顶部导航栏菜单制作
HTML+CSS实现顶部导航栏菜单制作导航栏的制作：技术要求：CSSHTML各类标签实现⽬的：制作导航栏菜单代码分析：基本样式清除⽆序列原点删除下划线删除⽂字默认居中a标签设置块级元素伪类选择器对a状态修饰分步实现：分三栏布局：使⽤浮动logo⼀栏；选择栏⼀栏；搜索栏⼀栏logo部分：img标签，导⼊图⽚，a标签超链接，img导⼊图⽚，防⽌图⽚失真width和height设置⼀个就可以了<div class="logo"><a href="#"><img src="D:\惠州客家⾯.jpg" width="150" alt="惠州客家⾯"></a></div>选择栏：ul>li标签列表标签，a标签超链接<ul class="list"><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><li><a href="#">猪脚叉烧⾯</a></li><li><a href="#">猪脚卤蛋⾯</a></li><li><a href="#">猪脚⾁丸⾯</a></li><li><a href="#">叉烧⾁丸⾯</a></li></ul>搜索栏：font表单，input属性，输⼊框和按钮<div class="search"><form><input type="submit" value="搜索" class="search1"><input type="text" class="content1"></form></div>实现分析：⾸先在body内设置⼀个站点的头部盒⼦，头部盒⼦⾥⾯有⼀个中⼼的盒⼦。
CSS自适应导航菜单的实例代码
CSS⾃适应导航菜单的实例代码以下是⼀个简单实例，可以通过学习了解响应⼯菜单的制作。
html<nav class="nav"><ul><li class="current"><a href="#">Portfolio</a></li><li><a href="#">Illustration</a></li><li><a href="#">Web Design</a></li><li><a href="#">Print Media</a></li><li><a href="#">Graphic Design</a></li></ul></nav>css.nav {position: relative;margin: 20px 0;}.nav ul {margin: 0;padding: 0;}.nav ul li {margin: 0 5px 10px 0;padding: 0;list-style: none;float: left;}.nav a {padding: 3px 12px;text-decoration: none;color: #999;line-height: 100%;}.nav a:hover {color: #000;}.nav .current a {background: #999;color: #fff;border-radius: 5px;}/* right nav */.nav.right ul {text-align: right;}/* center nav */.nav.center ul {text-align: center;}页⾯⼩于600显⽰成⼀列@media (max-width: 600px) {.nav {position: relative;min-height: 30px;}.nav ul {width: 180px;padding: 5px 0;position: absolute;top: 0;left: 0;border: solid 1px #aaa;background: #fff url(images/icon-menu.png) no-repeat 10px 11px;border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.3);}.nav li {display: none; /* hide all <li> items */margin: 0;}.nav .current {display: block; /* show only current <li> item */}.nav a {display: block;padding: 5px 5px 5px 32px;text-align: left;}.nav .current a {background: none;color: #666;}/* on nav hover */.nav ul:hover {background-image: none;}.nav ul:hover li {display: block;margin: 0 0 5px;}.nav ul:hover .current {background: url(images/icon-check.png) no-repeat 10px 7px;}/* right nav */.nav.right ul {left: auto;right: 0;}/* center nav */.nav.center ul {left: 50%;margin-left: -90px;}}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
使用HTMl+CSS制作二级菜单或二级导航栏
使⽤HTMl+CSS制作⼆级菜单或⼆级导航栏 ⼆级菜单的实现思路为：1.在默认状态下，使⽤display:none;将⼆级菜单隐藏。
2.当⼀级菜单中的列表标签li获取焦点(hover)后，使⽤display:blick;将⼆级菜单显⽰出来。
3.使⽤position: relative;和position: absolute;分别得⼀级菜单和⼆级菜单设置相对定位和绝对定位。
本内容⾯向⼩⽩向，我在代码中加了详细的注释，解释了语句的作⽤。
⼆级菜单展开后效果如下(没有美化，见谅)： HTMl代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"/><title>⼆级菜单</title><link rel="stylesheet" type="text/css" href="css/index.css"/></head><body><div class="menu"><ul><li>⾸页</li><li>博客<ul><li>博客1</li><li>博客2</li><li>博客3</li></ul></li><!-- 注意：需要将⼆级菜单的ul放在⼀级菜单的li标签内 --><li>新闻</li><li>账户</li></ul></div></body></html> CSS代码如下：ul li{list-style: none;/* 清除列表原有样式 */}.menu{width: 600px;height: 60px;background-color: aquamarine;}.menu ul li{float: left;/* 使列表(⼀级菜单)横向 */margin-right: 50px;margin-top: 20px;/* 设置⼀级菜单内容的位置 */position: relative;}.menu ul li ul{width: 100px;height: 160px;margin-left: -50px;background-color: #7FFFD4;display: none;/* 设置初始为不显⽰ */position: absolute;}.menu ul li:hover ul{display: block;/* 当⼀级菜单的li获取hover后将⼆级菜单的ul显⽰出来 */}原创内容，转载请注明出处。
实战教程使用HTML和CSS创建漂亮的导航菜单
实战教程使用HTML和CSS创建漂亮的导航菜单HTML和CSS是网页设计中最基本也是最重要的两种技术语言。
HTML负责页面结构和内容的展示，而CSS则负责页面的样式和布局。
在本教程中，我将为你详细介绍如何使用HTML和CSS创建一个漂亮的导航菜单。
一、HTML结构首先，我们需要使用HTML来构建导航菜单的结构。
以下是一个基本的导航菜单的HTML代码示例：```html<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></ul></nav>上述代码中，`<nav>`标签表示导航菜单的容器，`<ul>`标签用于包裹菜单项，`<li>`标签表示每个菜单项，`<a>`标签用于定义菜单项的链接。
二、应用CSS样式接下来，我们将使用CSS为导航菜单添加样式。
以下是一个基本的CSS样式代码示例：```cssnav {background-color: #f2f2f2;padding: 10px;}nav ul {list-style-type: none;margin: 0;padding: 0;}nav ul li {display: inline;nav ul li a {display: block;padding: 10px;text-decoration: none;color: #333;font-weight: bold;}nav ul li a:hover {background-color: #333;color: #fff;}```上述代码中，我们为导航菜单添加了背景颜色、内边距和一些基本的布局样式。
CSS浮动布局与菜单栏设计
CSS浮动布局与菜单栏设计 公司周六停电，终于可以双休了。
⽤周五空余时间再夯实⼀下css基础，《CSS权威指南》概念性的内容看起来容易犯困，不如实践来得快，动⼿操作吧。
⼀、浮动布局 浮动存在问题：浮动使元素脱离⽂档流，导致下⾯的元素向上提。
布局存在问题：由于浮动元素宽度已设定，根据盒模型，对于有宽度的盒⼦添加padding border和magin导致盒⼦变⼤，从⽽挤出后⾯浮动元素，导致下移，称作“浮动移滑”。
围住浮动元素的三种⽅法： 1为⽗元素添加 overflow:hidden 强制包围浮动元素 2同时浮动⽗元素后⾯的元素清除 clear:both 3 1、添加⾮浮动的清除元素 div 2、添加伪类： .class:after{conten:'.';display:'block';height:0;visibility:hidden;clear:both;} 解决“浮动移滑”⽅案： 1.从设定的元素宽度中减去添加的外边距，内边距和边框宽度和（⼀变化就容易出错）； 2.给元素添加⼀个div，把内容放到div中。
3 使⽤box-sizing:border-box 添加边距使内容收缩，⽽不是盒⼦变⼤。
ie6/ie7不⽀持。
三栏固定宽带布局（⽤到浮动和清除） HTML代码1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Title</title>6 <link rel="stylesheet" href="../CSS/threeLayout.css" type="text/css"/>7 </head>8 <body>9 <header>浮动与三栏固定宽度布局</header>10 <div id="wrapper">11 <nav>这是导航栏</nav>12 <article>这是中间栏</article>13 <aside>这是右边栏</aside>14 </div>15 <footer>这是⾓标</footer>16 </body>17 </html>html代码 CSS代码： 1 body{2 text-align: center;3 }4 header {5 background: #f00;6 }7 footer{8 backgroud:#000;9 }10 nav{11 width:150px;12float: left;13 }14 article{15 width:600px;16float: left;17 background: #ffed53;18 }19 aside{20 width: 210px;21float: left;22 background: #3f7ccf;23 }24 footer{25 clear: left;26 background: #000;27 }css代码 三栏-中栏流动布局/圣杯布局/双飞翼布局三栏-中栏流动1负外边距实现 1.设计思路：⼀个div包围左中右三栏，⼀个div包围左中两栏，利⽤负边距实现。
使用js和css实现网页导航栏的下拉菜单
position:relative; /*参照父级的原始点为原始点进行相对定位；对象不可层叠、不脱离文档流*/
}
#navigation li a:link,#navigation li a:visited
{
display:block;
text-decoration:none; /*文本强调，无下划线*/
}
</script>
<body>
<center>
<ul id="navigation">
<li><a href="#">菜单一</a></li>
<li onmouseover="ShowSubMenu(this)" onmouseout="HideSubMenu(this)"><a href="#">菜单二</a>
{
color:#ffffff;
background:#dd3300;
}
#navigation li ul li a:hover
{
color:#ffffff;
background:#00dd33;
}
</style>
<script type="text/javascript">
function ShowSubMenu(li)
left:0; /*距父元素的左距*/
margin-left:0px; /*子表的外边距为0，是子表与父表对齐*/
7个强大超酷的CSS导航菜单
7个强⼤超酷的CSS导航菜单
via noupe.
新的技术在不断的发展和更新，利于我们创造更多独特和看上去很酷的菜单效果。
下⾯是7个基于CSS创建的⽹页导航菜单：
1)
这是来⾃Nick La设计的⼀个漂亮的CSS导航菜单效果，其中详细的介绍了如何对⼀幅图⽚进⾏切⽚并把它们组合在⼀起，形成⼀个独特漂亮的菜单。
需要注意的是，这个菜单在IE6下⾯有⼀个bug，在悬浮的时候，并不能达到背景图⽚切换的效果，这个时候，你需要给链接属性指定mouseover来进⾏显⽰。
2)
这是⼀个全新的菜单设计概念。
通常我们设计⼀个导航菜单，会改变⿏标悬浮在它上⾯时的样式，⽽这个菜单是当你⿏标悬浮在当前导航链接时，改变其它链接的样式。
3)
著名的Suckerfish Dropdowns回来了，并且这次它的体积更⼩了，仅仅12⾏的Javascript代码，并且正常运⾏于Safari和Opera,⽀持多级下拉菜单。
4)
树蛙菜单，光是这个名字就挺有趣的。
当⿏标悬停的时候才出现⼆级菜单列表，⽽同时⼜⽀持多级的浮动菜单。
5)
这个菜单的最⼤特点是当⿏标悬浮的时候，出现对导航菜单的补充说明。
这⼀应⽤能精简你的导航系统，且给⽤户⼀个更直观的导航描述，让⽤户知道，他将点击的东西会为他带为什么样的内容，⽽这⼀切，都是纯CSS的，不需要任何Javascript.
6)
这是8个基于CSS的导航菜单，它们或许并不是最特别的，却是最常⽤最基础的，你不能错过。
7)
Drop Down Tabs 提供了五种不同样样式的下拉选项卡的导航单，当然，你完全可以⾃定义它，让它看上去更加漂亮和特别。
HTMLCSS：导航栏水平和垂直
HTMLCSS：导航栏⽔平和垂直1.垂直导航栏导航栏 = 链接列表导航栏基本上是⼀个链接列表，因此使⽤ <ul> 和 <li> 元素是⾮常合适的。
如需构建垂直导航栏，我们只需要定义 <a> 元素的样式演⽰：代码：HTML<div class="nav"><ul><li><a href="#">HOME</a></li><li><a href="#">MTRA</a></li><li><a href="#">PRODUCT</a></li><li><a href="#">MORE</a></li></ul></div>CSS.nav {background-color: #F5F5DC;}.nav ul {margin: 0;padding: 0;list-style-type: none;line-height: 3em;}.nav a {display: block;width: 10em;text-align: center;text-decoration: none;background-color: #CCCCCC;}.nav a:hover {background-color: #E6E6FA;}核⼼代码：list-style-type:none - 删除圆点。
导航栏不需要列表项标记。
把外边距和内边距设置为 0 可以去除浏览器的默认设定。
display:block - 把链接显⽰为块元素可使整个链接区域可点击（不仅仅是⽂本），同时也允许我们规定宽度。
css3制作扇形菜单
css3制作扇形菜单⼯作中⽹页中有⼀个扇形的导航菜单,以前没有接触过,参考了以及原⽹站/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms,作者讲得很详细,我就不多说了,下⾯是我的demo：有⼀部分浏览器不⽀持css3，还需要为其设置另⼀套样式，通过js判断浏览器类型，并替换样式。
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>纯CSS扇形菜单</title><style type="text/css">/*导航外层div设为圆形*/.css-transforms .menu-wrapper {overflow: hidden;zoom: 1;position: relative;width: 460px;height: 460px;margin: 40px auto 0;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;background: transparent;pointer-events: auto;border: 1px solid #000;}/*覆盖a标签的内侧靠近圆⼼的部分, 避免⿏标点击事件*/.css-transforms .menu-wrapper:after{color: transparent;content:".";display:block;position: absolute;z-index:10;left: 50%;top:50%;margin-left: -150px;margin-top: -150px;width: 300px;height: 300px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;border: 1px solid blue;}.css-transforms .menu-wrapper li {position: absolute;top: -70px;left: -70px;overflow: hidden;width: 300px;height: 300px;transform-origin: 100% 100%;pointer-events: none;border: 1px solid green;}/*a标签反倾斜⾓度为-(90-x),旋转⾓度为-x,x为我们想要的圆⼼⾓,在这个demo⾥,有3个列表项,半圆,得出圆⼼⾓为60*/.css-transforms .menu-wrapper li a {position: absolute;right: -200px;bottom: -200px;display: block;width: 420px;height: 420px;border-radius: 50%;color: #fff;text-align: center;text-decoration: none;/*先斜切后旋转,不可颠倒*/-webkit-transform: skew(-30deg) rotate(-60deg) scale(1);-moz-transform: skew(-30deg) rotate(-60deg) scale(1);-ms-transform: skew(-30deg) rotate(-60deg) scale(1);-o-transform: skew(-30deg) rotate(-60deg) scale(1);transform: skew(-30deg) rotate(-60deg) scale(1);pointer-events: auto;}}/*列表项倾斜⾓度为90-x,每个列表项的旋转⾓度依次间隔 >60 */ .css-transforms .menu-wrapper li:first-child {-webkit-transform: rotate(-10deg) skew(30deg);-moz-transform: rotate(-10deg) skew(30deg);-ms-transform: rotate(-10deg) skew(30deg);-o-transform: rotate(-10deg) skew(30deg);transform: rotate(-10deg) skew(30deg);}.css-transforms .menu-wrapper li:nth-child(2) {-webkit-transform: rotate(60deg) skew(30deg);-moz-transform: rotate(60deg) skew(30deg);-ms-transform: rotate(60deg) skew(30deg);-o-transform: rotate(60deg) skew(30deg);transform: rotate(60deg) skew(30deg);}.css-transforms .menu-wrapper li:nth-child(3) {-webkit-transform: rotate(-130deg) skew(30deg);-moz-transform: rotate(-130deg) skew(30deg);-ms-transform: rotate(-130deg) skew(30deg);-o-transform: rotate(-130deg) skew(30deg);transform: rotate(130deg) skew(30deg);}.css-transforms .menu-wrapper li a span{display: none;}.css-transforms .menu-wrapper li:first-child a{background: radial-gradient(transparent 45%, #dc7d01 35%); }.css-transforms .menu-wrapper li:nth-child(2) a{background: radial-gradient(transparent 45%, #a70101 35%); }.css-transforms .menu-wrapper li:nth-child(3) a{background: radial-gradient(transparent 45%, #017d07 35%); }.css-transforms .menu-wrapper li:first-child a:hover,.css-transforms .menu-wrapper li:first-child a:active,.css-transforms .menu-wrapper li:first-child a:focus {background: radial-gradient(transparent 45%, #e88503 35%); }.css-transforms .menu-wrapper li:nth-child(2) a:hover,.css-transforms .menu-wrapper li:nth-child(2) a:active,.css-transforms .menu-wrapper li:nth-child(2) a:focus {background: radial-gradient(transparent 45%, #b40303 35%); }.css-transforms .menu-wrapper li:nth-child(3) a:hover,.css-transforms .menu-wrapper li:nth-child(3) a:active,.css-transforms .menu-wrapper li:nth-child(3) a:focus {background: radial-gradient(transparent 45%, #028b09 35%); }.css-transforms .menu-wrapper li:first-child a img{margin-top: 8px;-webkit-transform: rotate(-25deg);-moz-transform: rotate(-25deg);-ms-transform: rotate(-25deg);-o-transform: rotate(-25deg);transform: rotate(-25deg);}.css-transforms .menu-wrapper li:nth-child(2) a img{margin-top: 21px;}.css-transforms .menu-wrapper li:nth-child(3) a img{margin-top: -2px;-webkit-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-ms-transform: rotate(-60deg);-o-transform: rotate(-60deg);transform: rotate(-60deg) ;}/*不⽀持css3*/.no-transforms .menu-wrapper{margin:10em auto;padding:1em;border: 1px solid #000;}.no-transforms .menu-wrapper ul{display:inline-block;}.no-transforms li{width:120px;height:50px;float:left;line-height:50px;text-align:center;margin-right: 20px;background-color: #fff;/*border: 1px solid red;*/}.no-transforms li a{display:block;height:100%;width:100%;line-height: 50px;text-decoration: none;color: #fff;}.no-transforms .menu-wrapper li a span{display: block;}.no-transforms .menu-wrapper li a img{display: none;}.no-transforms li a.first{background-color: #e88503;}.no-transforms li a.second{background-color: #b40303;}.no-transforms li st{background-color: #028b09;}.no-transforms .menu-wrapper li a:hover,.no-transforms .menu-wrapper li a:active,.no-transforms .menu-wrapper li a:focus{-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}</style></head><body><div class="css-transforms" id="box"><div class="menu-wrapper"><ul><li><a href="#" class="first"><img src="./font-1.png" alt=""><span>彝族⾳乐图⽚</span></a></li> <li><a href="#" class="second"><img src="./font-2.png" alt=""><span>彝族⾳乐理论</span></a></li> <li><a href="#" class="last"><img src="./font-3.png" alt=""><span>彝族⾳乐</span></a></li></ul></div></div><script>//为不⽀持css3的浏览器更换样式var wrapper = document.getElementById('box');var supports = (function() {var div = document.createElement('div'),vendors = 'Khtml Ms O Moz Webkit'.split(' '),len = vendors.length;return function(prop) {if ( prop in div.style ) return true;prop = prop.replace(/^[a-z]/, function(val) {return val.toUpperCase();});while(len--) {if ( vendors[len] + prop in div.style ) {return true;}}};})();if ( !supports('transform') ) {removeClass(wrapper, 'css-transforms');addClass(wrapper, 'no-transforms');}function hasClass(obj, cls) {return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); }function addClass(obj, cls) {if (!this.hasClass(obj, cls)) obj.className += " " + cls;}function removeClass(obj, cls) {if (hasClass(obj, cls)) {var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');obj.className = obj.className.replace(reg, ' ');}}</script></body></html>效果如下:。
- 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;}=================================。