87,904
社区成员
发帖
与我相关
我的任务
分享css下拉菜单问题
在第36行加了边框，但是没有反应。
还有为什么有的下拉框中文字前有点，有的文字前没点。
还有为什么有的下拉框中文字前有点，有的文字前没点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
#nav li{
list-style:none;
float:left;
}
#nav li a{
display:block;
background:#003399;
line-height:24px;
width:70px;
text-align:center;
}
#nav li a:link{
color:#fff;
font-size:12px;
text-decoration:none;
}
#nav li a:hover{
color:#003399;
background:#fff;
}
#nav li ul{
width:70px;
float:none;
display:none;
border-left:1px solid #000;
}
#nav li ul a:link{
color:#003399;
background:#fff;
}
#nav li:hover ul{
display:block;
}
</style>
</head>
<body>
<div id=div_center>
<UL id=nav>
<LI style="MARGIN-LEFT: 10px">
<A href="http://www.codefans.net">
主站索引
</A>
</LI>
<LI>
<A href="#">
新闻中心
</A>
<UL>
<LI>
<A href="#">
·新闻中心1
</A>
</LI>
<LI>
<A href="#">
·新闻中心3
</A>
</LI>
</UL>
</LI>
<LI>
<A href="#">
企业简介
</A>
<UL>
<LI>
<A href="#">
·企业简介
</A>
</LI>
<LI>
<A href="#">
·产品中心
</A>
</LI>
<LI>
<A href="#">
·服务专区
</A>
</LI>
</UL>
</LI>
<LI>
<A href="#">
文章中心
</A>
<UL>
<LI>
<A href="#">
·文章中心
</A>
</LI>
<LI>
<A href="#">
·文章中心
</A>
</LI>
</UL>
</LI>
<LI>
<A href="#">
国际新闻
</A>
<UL>
<LI>
<A href="#">
国际新闻
</A>
</LI>
<LI>
<A href="#">
国内新闻
</A>
</LI>
<LI>
<A href="#">
科技新闻
</A>
</LI>
</UL>
</LI>
<LI>
<A href="#">
图片新闻
</A>
<UL>
<LI>
<A href="#">
·图片中心
</A>
</LI>
<LI>
<A href="#">
·图片中心
</A>
</LI>
</UL>
</LI>
<LI>
<A href="#">
下载中心
</A>
<UL>
<LI>
<A href="#">
·常用软件
</A>
</LI>
<LI>
<A href="#">
·文档下载
</A>
</LI>
<LI>
<A href="#">
社区论坛
</A>
</LI>
</UL>
</UL>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
conanhhy 2013-09-16
- 打赏
- 举报
36行的加边框呢[/quote]
其实LZ你可以看下，我贴出的第一段HTML代码，内部节点的构造和LZ定义的CSS完全不一致。
LZ提到的36行代码
，太吃惊了
同样都是chrome，无语啊
#nav li ul{
width:70px;
float:none;
display:none;
border-left:1px solid #000;
}
<ul id="nav">
<li>
<ul>
...
</ul>
</li>
</ul>
<li>
<a href="#">新闻中心
<ul>
...
</ul>
</a>
</li>
.ulstyle {
width:70px;
float:none;
display:none;
border-left:1px solid #000;
}
#nav li ul li{
border-left:1px solid #000;
}
mark063 2013-09-15
- 打赏
- 举报
36行的加边框呢[/quote]
其实LZ你可以看下，我贴出的第一段HTML代码，内部节点的构造和LZ定义的CSS完全不一致。
LZ提到的36行代码
#nav li ul{
width:70px;
float:none;
display:none;
border-left:1px solid #000;
}
<ul id="nav">
<li>
<ul>
...
</ul>
</li>
</ul>
<li>
<a href="#">新闻中心
<ul>
...
</ul>
</a>
</li>
.ulstyle {
width:70px;
float:none;
display:none;
border-left:1px solid #000;
}
conanhhy 2013-09-14
- 打赏
- 举报
36行的加边框呢[/quote]
其实LZ你可以看下，我贴出的第一段HTML代码，内部节点的构造和LZ定义的CSS完全不一致。
LZ提到的36行代码
#nav li ul{
width:70px;
float:none;
display:none;
border-left:1px solid #000;
}
<ul id="nav">
<li>
<ul>
...
</ul>
</li>
</ul>
<li>
<a href="#">新闻中心
<ul>
...
</ul>
</a>
</li>
.ulstyle {
width:70px;
float:none;
display:none;
border-left:1px solid #000;
}
零点零的距离 2013-09-14
- 打赏
- 举报
你用的是<ul><li>它是会有点的，边框的话你（border-left）这个是加左边的，后满你又是写的所写形式，所以没用。
一天要饭生活又开始啦 2013-09-14
- 打赏
- 举报
.clearfix:after { content:' '; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { *zoom:1; }
给#nav li ul加类clearfix
mark063 2013-09-14
- 打赏
- 举报
36行的加边框呢
conanhhy 2013-09-14
- 打赏
- 举报
1. LZ应该通过浏览器的开发者调试工具看看页面的HTML代码是否和自己料想的一致。
下面是根据LZ提供的代码，通过浏览器查看得到的
<li>
<a href="#">新闻中心
<ul>
<li>
<a href="#">·新闻中心1
</a href="#"></li>
<li>
<a href="#">·新闻中心3
</a href="#"></li>
</ul>
</a href="#"></li>
<A href="#">
·文档下载
</A>
<A href="#">
社区论坛
</A>
