横向下拉菜单的css问题

yanxw_227 2007-11-30 08:17:32
横向下拉菜单css实现,无js脚本,ie下没有问题,firefox下就出问题了。

<style>
body {color:#fff;margin-top:-8px;}
#wrapper {color:#000;}
#info {margin-top:20px;}
#head {height:0px; border:0;}
#positioner {clear:both; position:relative; left:1px; z-index:100;}
.menu {display:block; position:absolute;}
.menu a.outer, .menu a.outer:visited
{ /* 定义menu的样式 */
color:#fff;
width:202px;
height:18px;
display:block;
background:#95A1D9;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana, arial, sans-serif;
font-size:14px;
line-height:18px;
overflow:hidden;
}
.menu a.outer:hover
{
background:blue;
overflow:visible;
}
.menu a.outer:hover table.first
{
display:block;
background:#eee;
border-collapse:collapse;
}
.menu a.inner, .menu a.inner:visited
{
display:block;
width:200px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
font-family: verdana, arial, sans-serif;
font-size:12px;
text-align:center;
}
.menu a.inner:hover
{
background:#add;
}

</style>

<DIV id=wrapper>

<DIV id=head>
<DIV id=positioner>
<DIV class=menu>
<A target=content class=outer href="1.php">首页
<TABLE class=first>
<TR>
<TD>
<A target=content class=inner title="下拉1" href="1.php">下拉1</A>
<A target=content class=inner title="下拉2" href="2.php">下拉2</A>
</TD>
</TR>
</TABLE>
</A>
</DIV>
</DIV>
</DIV>

<DIV id=info>
</DIV>


</DIV>
...全文
470 点赞 收藏 8
写回复
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
lujun1985 2007-12-05
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Dropdown</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}
.menu {
margin-left:10px;
margin-top:10px;
font-size: 12px;
position: relative;
z-index: 100;
}

.menu ul {
list-style: none;
}

.menu li {
float: left;
position: relative;
text-align: center;
}

.menu ul ul {
visibility: hidden;
position: absolute;
left: 0;
top: 20px;
}

.menu table {
position: absolute;
top: 0;
left: 0;
}

.menu ul li:hover ul,.menu ul a:hover ul {
visibility: visible;
}

.menu a {
display: block;
border: 1px solid black;
background-color: #95A1D9;
color: white;
padding: 2px 0;
text-decoration: none;
width:202px;
}

.menu a:hover {
background-color: blue;
border: 1px solid black;
}

.menu ul ul li {
clear: both;
font-size: 12px;
}

.menu ul ul li a {
width: 100px;
height: 14px;
color: black;
background-color: #EEE;
border: 1px solid black;
border-top: 0;

width: 202px;
text-align: center;
}

.menu ul ul li a:hover {
background-color: #add;
border: 1px solid black;
border-top: 0;
text-align: center;
}
</style>
</head>

<body>

<div class="menu">
<ul>
<li>
<a href="">首页 <!--[if IE 7]><!--> </a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">下拉1</a>
</li>
<li>
<a href="#">下拉2</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

<br />
<br />
<p>Some words</p>
</body>
</html>

好了~~
应该没问题~
在设置第一行的宽度的时候,将width从li移到了a
要不然会有一个像素的偏差~
你再看一下吧~
之前的有些东西是多余的~

CSS这种东西用多了就好了~
特别是兼容性的问题,很让人头大的~~
回复
yanxw_227 2007-12-04
改过了,还是不行,尤其是border边框会重合在一块儿,变粗了~
麻烦楼上再帮忙看看,css用的不熟练~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS Dropdown</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}

.menu {
margin-left:10px;
margin-top:10px;
font-size: 14px;
position: relative;
z-index: 100;

}

.menu ul {
list-style: none;
}

.menu li {
float: left;
position: relative;
text-align: center;
width: 202px;
}

.menu ul ul {
visibility: hidden;
position: absolute;
left: 0px;
top: 20px;
}

.menu table {
position: absolute;
top: 0;
left: 0;
}

.menu ul li:hover ul,.menu ul a:hover ul {
visibility: visible;
}

.menu a {
display: block;
border: 1px solid black;
background-color: #95A1D9;
color: white;
padding: 2px 0px;
text-decoration: none;
}

.menu a:hover {
background: blue;
}

.menu ul ul li {
clear: both;
font-size: 12px;
}

.menu ul ul li a {
width: 200px;
height: 14px;
color: black;
background-color: #EEE;
/*
border-bottom: 1px solid black;
*/
text-align: center;
}

.menu ul ul li a:hover {
background-color: #add;
text-align: center;
}
</style>
</head>

<body>

<div class="menu">
<ul>
<li>
<a href="">首页 <!--[if IE 7]><!--> </a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">下拉1</a>
</li>
<li>
<a href="#">下拉2</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

<br />
<br />
<p>Some words</p>
</body>
</html>
回复
lujun1985 2007-12-02
你不就是这样写的么?
border-bottom:1px solid #000;
只有下面的边框~

.menu a 是“首页”的默认显示格式
.menu a:hover 是当鼠标放在上面时“首页”的显示格式


.menu ul ul li a 是“下拉”的默认显示格式
.menu ul ul li a:hover 是当鼠标放在上面时“下拉”的显示格式

你可以找到对应的地方进行修改
回复
yanxw_227 2007-12-02
楼上,首先谢谢你的回答,功能基本实现了,但是有些细节还是有问题,具体实现就是原帖子里面的那种:
1. hover在首页时,下拉1和下拉2没有左右边框,而且下拉2下面除了自己的下边框外还有一个边框;
2. hover在下拉1时,下拉1的边框都消失了;下拉2同样!
回复
lujun1985 2007-11-30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Dropdown</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}

.menu {
margin-left:10px;
margin-top:10px;
font-size: 12px;
position: relative;
z-index: 100;
}

.menu ul {
list-style: none;
}

.menu li {
float: left;
position: relative;
text-align: center;
width: 202px;
}

.menu ul ul {
visibility: hidden;
position: absolute;
left: 0px;
top: 20px;
}

.menu table {
position: absolute;
top: 0;
left: 0;
}

.menu ul li:hover ul,.menu ul a:hover ul {
visibility: visible;
}

.menu a {
display: block;
border: 1px solid black;
background-color: #95A1D9;
color: white;
padding: 2px 0px;
text-decoration: none;
}

.menu a:hover {
background: blue;
border: 1px solid black;
}

.menu ul ul li {
clear: both;
font-size: 12px;
}

.menu ul ul li a {
width: 100px;
height: 14px;
border: 0;
color: black;
background-color: #EEE;
border-bottom: 1px solid black;
width: 202px;
text-align: center;
}

.menu ul ul li a:hover {
border: 0;
background-color: #add;
border-bottom: 1px solid white;
width: 202px;
text-align: center;
}
</style>
</head>

<body>

<div class="menu">
<ul>
<li>
<a href="">首页 <!--[if IE 7]><!--> </a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">下拉1</a>
</li>
<li>
<a href="#">下拉2</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

<br />
<br />
<p>Some words</p>
</body>
</html>

搞定了~~
参考资料http://www.knowsky.com/345083.html
需要注意的是在.menu a {}
里的padding: 2px 0px;
需要在上下加上了2个像素的padding
这是因为如果不加的话第一个li和后面的ul之间会有空白,鼠标无法已移过去。

如果不想要padding的话,需要将整个ul上移
.menu ul ul {}里的top: 20px;需要改小一点,直到和上面的一个li接触为止。
回复
lujun1985 2007-11-30
不好意思~
我是用的IE7进行的测试~
在IE6上面运行好像不正确~

晚些时候我再做一个试试~
回复
lujun1985 2007-11-30
提示信息是“在<a>中不支持<table>”

我实现了一个类似的,使用的是ul和li,你可以参考一下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>Insert title here</title>


<style>
/* 清除掉多余的空白,否则在FF和IE上显示不一样 */
* {
margin:0;
padding:0;
}

/* 整体样式 */
body {
text-decoration:none;
font-family: verdana, arial, sans-serif;
font-size:14px;
}

/* 设置菜单的位置 */
.menu {
margin-left:20px;
margin-top:20px;
}



/* 什么都不做时的样式(把多余的部分隐藏起来) */
.menu ul.outer {
width:202px;
height:18px;
background-color:#95A1D9;
border:1px solid black;
overflow:hidden;
text-align:center;
}


/* 每一项的默认样式 */
ul.outer li {
list-style-type:none;
border-bottom:1px solid black;
}

/* 当鼠标放在第一项时,把隐藏的部分显示出来 */
.menu ul.outer:hover {
overflow:visible;
}

/* 第一项,也就是“首页”的默认样式 */
.menu ul.outer li.first {
color:white;
}
/* 当鼠标放到第一项时的样式 */
.menu ul.outer li.first:hover {
background-color:blue;
}
/* 非第一项 */
.menu ul.outer li.item {
background-color:#EEE;
color:black;
}
/* 非第一项,当鼠标放在上面时的样式 */
.menu ul.outer li.item:hover {
background-color:#ADD;
color:black;
}

</style>
</head>
<body>

<div class="menu">
<ul class="outer">
<li class="first">homempage</li>
<li class="item">dropdown1</li>
<li class="item">dropdown2</li>
</ul>
</div>
</body>
</html>
回复
xiaojing7 2007-11-30
错误怎么提示的?
回复
发动态
发帖子
CSS
创建于2007-09-28

5.9w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
社区公告
暂无公告