导航条列表不显示，CSS HTML都贴出来 麻烦谁帮我看一下！_百度知道
导航条列表不显示，CSS HTML都贴出来 麻烦谁帮我看一下！
Content-Type&/li&li&li&gt:0;&lt:none} ; background- overflow:#083a79; title=&quot.selected {color:0;}img {border:url(menu_&lt.menuer {&a&menus&quot:#f00;组织结构&&lt:&quot.menus a:left:&#47:12&组织结构&};li&gt.navs a:url(menu_title&/
&lt:0;li&a& title=&quot.menus a {&&#47:0&gt://link href=&
&lt.gif) no-repeat left 5px} :34&中心优势&a href=&&&新闻公告&/&quot:5px} .menuer ul {html xmlns=&span&&领导致词& overflow,& type=&mabout&quot:hidden}&lt:none}a;a&&li&body&div class=&&&li&gt://li&&&gt:#333, div {css&div class=&};/& font-weight:li&gt:#333;/&&联系我们& /联系我们&head&
& rel=&/&lt:12px};};/navs&&a href=&&& title=& charset=utf-8&你问我答&&中心目标&body&
& font-};& display:li&&/ padding-
&/中心简介&lt:center} ;你问我答&span&a&客户留言&lt.navs ul {&gt:none}a {color:hidden} :0 17px} .menus li {body{ul id=&quot.w3;/title&span&gt:url(menu_&#47:34
&lt.paper{/ margin-中心优势&&meta http-equiv=&quot鼠标移动到列表上 没有变化 我也设置rel了
可是不行 找人看看什么问题;&#47:26
&lt.gif) no-&#47:85px:165a&gt. rel=&&/& text-align:#/ title=&quot.navs li {/&a&
&&quot:none};&a href=&quot.org/1999/xhtml&/客户留言& title=&
&&span&&/ul&span& title=&quot.css&li&gt:14text/text/ padding:hover {&stylesheet&a href=&quot.gif) repeat-x;li&gt:68px:700&&/div class=&&领导致词& line-height:34px:url(menu_&& text- background:left} ;li&&&paper menuer& background- line-height:hover span {a href=&/div&gt, dt:12px};中心简介&li&gt:#666} ;&li& title=&quot.a href=&quot:hover {&#47:hidden:hover {text-a href=&/li&& text-div&网站首页&&lt.left{ float:2px} ;a&/span&a&li&a href=&quot.w3;/
text-decoration:0:url(body_ul&&/ line-height.top{ font-head&&lt:block:0 12px 0 7mabout&& title=&ul& margin-&
&span&gt！&lt.navs a {display
提问者采纳
org/TR/xhtml1/DTD/xhtml1--&#47.dtd&text/EN&quot://www!DOCTYPE html PUBLIC &head&gt://www.w3; charset=gb2312&W3C/;http.org/TR/xhtml1/DTD/xhtml1-&gt.org/1999/xhtml" target="_blank">http://www://www.w3; &&&meta http-equiv=&quot.org/1999/xhtml&<a href="/DTD XHTML 1; /&gt.w3;& content=&quot.0 Transitional&#47.w3
提问者评价
其他类似问题
overflow:14px.menus a {height.gif) no-repeat center bottom}伪类没定义好.selected {color:34px:85px:url(menu_ overflow:40 width:14px:# background:bold:34px: color:hidden} :#083a79: line- font-weight: display:40px:url(menu_select. line- font-size.menus a { font-weight，把下面这句修改下; background:85 font-size: display:#fff:#083a79，
导航条的相关知识
其他2条回答
; charset=&这句改为 改为&Content-Type&text&#47&html& charset=utf-8&meta http-equiv=& / content=&Content-Type& content=&text/meta http-equiv=& /&&utf-8&quot
.menus a {height:34 font-size:14 font-weight: color:# display: width:85 overflow:hidden}里的color:#fff改成 color:#666
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁&&|&&责编：崔宁
&虽然网上类&#20284;甚至相同的案例有很多，但是我还是写下，以记下笔记，也可供大家参考
希望大家可以指导批评~~
首先我们以列表ul li 来开始我们菜单也可以说导航条的制作：
在页面中我们首先构建以下XHTML结构：
(点小图查看大图)(点小图查看大图)
&ul id=&navWrapper&&
&a href=&#&&Menu A&/a&
&li&&a href=&#&&Menu A, Item 1&/a&&/li&
&li&&a href=&#&&Menu A, Item 2&/a&&/li&
&li&&a href=&#&&Menu A, Item 3&/a&&/li&
&li&&a href=&#&&Menu A, Item 4&/a&&/li&
&li&&a href=&#&&Menu A, Item 5&/a&&/li&
&li&&a href=&#&&Menu A, Item 6&/a&&/li&
&a href=&#&&Menu B&/a&
&div id=&test&&&a href=&#&&Menu B, Item 1&/a&&/div&
&div id=&banner&&&/div&
&div id=&content&&
&p&Page content here.&/p&
(点小图查看大图)
接着，我们来一步一步设计样式及功能（先给每个元素加个边框以便后续样式设计区别）：
样式代码：
(点小图查看大图)(点小图查看大图)
(点小图查看大图)
这样我们就可以好区分，好设计了~~
下面去掉链接的下滑线和列表的“.”“。”，并且使父级的列表横向排列，子级列表还是纵向排列，这样才像下拉菜单嘛~~（这里是两级列表嵌套，一个父级一个子级）
样式代码：
(点小图查看大图)(点小图查看大图)
text-decoration:
ul#navWrapper li{
list-style:
ul#navWrapper li ul li{
div#banner{
(点小图查看大图)
下面来隐藏子级列表和子级容器（这里子级容器是指id为test的div容器），当鼠标移动到父级列表时相对应的子级列表显现出来，通过“&:hover ”实现，隐藏显现通过display的“&none ”和“&block ”来实现，注意这里不用visibility的“&hidden ”和“&visible ”来实现，至于区别大家可以把相应的属性换成visibility来看看效果，这里就不实现了
样式代码：
(点小图查看大图)(点小图查看大图)
text-decoration:
ul#navWrapper li{
list-style:
ul#navWrapper li ul li{
div#banner{
ul#navWrapper ul,ul#navWrapper div#test{
ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
(点小图查看大图)
这里有一点需要注意，当不设置子级的position为“&absolute ”时，鼠标移动到父级，出现的子级会在页面占据一定的位置，那么“&Page&content here&”将会产生移动，这是十分不好的。所以我们设置子级“&position: ”，这样便可以使它们脱离正常的流程，不影响后面的内容位置！
再将父级位置稍微偏移下和将第一个父级下的自己列表向左偏移与父级边框对齐，并且给第二个父级下的div容器一定的“容积”
样式代码：
(点小图查看大图)(点小图查看大图)
text-decoration:
ul#navWrapper li{
list-style:
ul#navWrapper li ul li{
margin-left:-41
div#banner{
margin-top:30
ul#navWrapper ul,ul#navWrapper div#test{
ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
ul#navWrapper{
margin-left:-41
ul#navWrapper div#test{
height:200
background:
(点小图查看大图)
将所有边框去掉后这里最基本的结构就设计好了，其他的样式可以随意调整啦~~
将所有边框去掉后，并对整体进行下设计
样式代码：
(点小图查看大图)(点小图查看大图)
body,div,ul,li{
padding:0;
text-decoration:
ul#navWrapper li{
list-style:
line-height:45
ul#navWrapper li ul li{
div#banner{
margin-top:50
margin-left:50
div#content{
margin-left:50
ul#navWrapper ul{
background:#CCC;
ul#navWrapper div#test{
height:200
background:#cde6c7;
ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
ul#navWrapper{
background:#CCC;
margin-top:30
font-size:24
color:#333;
padding:0 20
li a:hover{
background:#000;
　　图一：
(点小图查看大图)
&　　图二：
(点小图查看大图)
&OK！这就是在以上基本结构上设计的一个例子了。如果还需要设计，只需要在以上最基本结构上设计就行了~~
参考文献：
本文相关搜索如何应用ul、li标签 创建css横向导航菜单？ - 推酷
如何应用ul、li标签 创建css横向导航菜单？
我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成，或者由单元格内的文字所组成，由于人们不再推荐用表格来定位任何非表格的页面内容，所以很多制作Web的人正在寻找新的方法，用结构化的XHTML标记和CSS格式来创建导航条。这样的创建方式也更对搜索引擎蜘蛛友好，这对我们来说是非常重要的。
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。但这样有意义吗？
现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered list）来标识。再应用CSS样式对其进行控制，按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的，因为我们习惯于把无序列表作为一个竖着推起来的列表项目，每个前面都放着一个列表预设标记。这似乎不符合导航条水平方向的习惯。但作为独立列表项目集合的列表逻辑结构能够适用于导航条里的链接；而CSS的规则让你能够强制取代列表项目缺省的表现形式，以消除它们并安排列表项在容器内按水平方向排列，而不是从上而下的规则。现在让我们来看看实例，根据无序列表创建CSS样式和XHTML标签的横向导航菜单。
我们看看下面的xhtml代码：
Example Source Code
&div id=&nav&&
&&& &li&&a href=&/&&HomePage&/a&&/li&
&&& &li&&a href=&/&&Div+CSS教程&/a&&/li&
&&& &li&&a href=&/&&CSS布局实例&/a&&/li&
&&& &li&&a href=&/&&CSS2.0教程 &/a&&/li&
&&& &li&&a href=&/&&CSS在线手册&/a&&/li&
&&& &li&&a href=&/&&Web标准&/a&&/li&
&&& &li&&a href=&/&&XHTML教程&/a&&/li&
我们再看看关于这段xhtml的CSS代码：
Example Source Code
&&& height: 30
&&& width: 100%;
&&& background-color: #c00;
&&& margin: 0 0 0 30
&&& padding: 0
&&& font-size: 12
&&& color: #FFF;
&&& line-height: 30
&&& white-space:
&&& list-style-type:
&&& display:
#nav li a {
&&& text-decoration:
&&& font-family: Arial, Helvetica, sans-
&&& padding: 7px 10
&&& color: #FFF;
#nav li a:hover {
&&& color: #ff0;
&&& background-color: #f00;
我们来看看上面的代码的运行效果：
Source Code to Run
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&&/title&
&style type=&text/css&&
height: 30
width: 100%;
background-color: #c00;
margin: 0 0 0 30
padding: 0
font-size: 12
color: #FFF;
line-height: 30
white-space:
list-style-type:
#nav li a {
text-decoration:
font-family: Arial, Helvetica, sans-
padding: 7px 10
color: #FFF;
#nav li a:hover {
color: #ff0;
background-color: #f00;
&div id=&nav&&
&li&&a href=&/&&HomePage&/a&&/li&
&li&&a href=&/&&Div+CSS教程&/a&&/li&
&li&&a href=&/&&CSS布局实例&/a&&/li&
&li&&a href=&/&&CSS2.0教程 &/a&&/li&
&li&&a href=&/&&CSS在线手册&/a&&/li&
&li&&a href=&/&&Web标准&/a&&/li&
&li&&a href=&/&&XHTML教程&/a&&/li&
[ 可先修改部分代码 再运行查看效果 ]
或许你并不能完全理解这些代码都是什么意义，都用来控制什么，达到什么效果。
下面我们来解析上面的代码：
xhtml代码首先定义了一个容器div id=&nav&。这个容器用来放置这个无序列表横向导航菜单的内容，但也有人认为这个容器是多余的，直接定义ul id=&nav&就可以了。我们不建议你这样做，要知道我们的站点是可扩展的，我们要为将来的扩展留有足够的余地，如果我们的导航样式设计的更加复杂，仅有的ul是不能满足需要的。我们定义这样的容器也更符合我们编写代码的习惯。
&&&& #nav li中的list-style-type:去除了列表项所使用的预设标记。使其更象是纯文本，而没有列表标记。display:声明则能够让列表项目在页面上从左向右浮动，而不会让每个项目显示在单独的行里而从上至下的排列。这两项声明是我们实现无序列表横向导航菜单的关键。
#nav li a和#nav li a:hover定义了链接的样式。其中的内容就不作深入了，唯一要讲的就是：padding: 7px 10它是用来控制链接文字之间的空白间隔的，你可以试着改变数值试试看。
至此，无序列表创建css横向导航菜单的工作就结束了.
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见第7章用CSS设置超链接与导航菜单_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者贡献于
评价文档：
29页免费10页免费22页免费1页&#165;0.5017页免费8页免费2页免费2页免费29页1下载券64页免费
喜欢此文档的还喜欢34页1下载券19页1下载券5页1下载券2页1下载券2页免费
第7章用CSS设置超链接与导航菜单|
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：1.80MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢