横向下拉菜单的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>

...全文

535 8 打赏收藏转发到动态举报

写回复

用AI写文章

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>