关于纯CSS下拉菜单

Leixian 2014-05-04 11:44:30
最近做一个项目需要做一个通用的下拉菜单,而又不想用JS

怎么用纯CSS实现下边的效果?可能我有点强迫症吧,老觉着上边那一横不好看



我的思路是用触发的那个标签去遮挡下拉菜单1个像素,就试着调整了z-index,
但是触发菜单的那个标签如果加上position: absolute 位置就会错位,
还不能再去往上一层添加 relative,因为我想做成通用的

所以有做过这个效果的,麻烦您给个思路~~谢谢!!
...全文
199 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
Leixian 2014-05-14
  • 打赏
  • 举报
回复
谢谢大家的回复,我最终是这样实现了,虽然还不能真正叫通用,但目前对于我来说是够用 以后肯定还得改进,大家如果有好的方法欢迎指正~~呵呵

<style type="text/css">
.d_m { cursor: pointer; background: #ddd; }
.d_m_b { position: relative; height: 100%; display: block; }
	.d_m_b p { position: absolute; height: 70%; width: 100%; z-index: 2; display: block; left: 0; bottom: -1px; }
		.d_m_b p span { display: inline-block; border: 0 solid #ccc; margin: 0 0 0 5px; border-width: 5px 5px 0; border-color: #333 #ddd; width: 0; overflow: hidden; height: 0; }
.d_m ul.pop { position: absolute; display: none; border: 1px solid #ccc; }
	.d_m ul.pop li a { padding: 0 30px; line-height: 25px; height: 25px; display: block; }
		.d_m ul.pop li a:hover { background: #eee; }
.d_m:hover { background: #fff; }
	.d_m:hover .d_m_b { background: #fff; border: 1px solid #ccc; border-width: 0 1px; }
		.d_m:hover .d_m_b p { background: #fff; }
		.d_m:hover .d_m_b span { border-width: 0 5px 5px; border-color: #333 #fff; }
	.d_m:hover ul.pop { display: block; background: #fff; }
</style>
...
						<td class="td1 d_m" id="idsbox">
							<div class="d_m_b">
								<p><input type="checkbox" name="ids" id="ids" value="0" /><span></span></p>
							</div>
							<ul class="pop">
								<li><a href="javascript:;" onclick="sel(0)">全选</a></li>
								<li><a href="javascript:;" onclick="sel(1)">不选</a></li>
								<li><a href="javascript:;" onclick="sel(2)">反选</a></li>
							</ul>
						</td>
...
周燕_zy 2014-05-08
  • 打赏
  • 举报
回复
一激动没有说清楚,刚刚发的希望对你有用,样式什么的你可以在css里面进行修改
周燕_zy 2014-05-08
  • 打赏
  • 举报
回复
<!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 type="text/css"> .menu { font-family:"黑体"; font-weight:bold; letter-spacing:1px; height:34px; margin-top:0px; font-size:16px; text-align:center; background:#CCCCCC ; width:250px; } .menu .menu_one { list-style-type: none; line-height:34px; } .one_fist{ width:135px} .one_ulli{width:145px;} .menu .menu_one li { text-decoration:none; float:left; } .menu ul li a,.menu ul li a:visited { color:#fff; text-decoration:none; display:block; } .menu ul li ul { display: none; } .menu ul li a:hover { color:#FFCC00; } .menu ul li:hover ul { display:block; border:5px #ECECEC solid; width:120px; position:absolute; margin-left:10px; font-family:"宋体"; background:#fff; font-weight:normal; font-size:14px; z-index:10; } .menu ul li:hover ul li{ clear:left; padding-left:5px; text-align:left; } .menu ul li:hover ul li a { color:#494949; } .menu ul li:hover ul.menu_two li{ list-style-type: none; line-height:24px; } .menu ul li:hover ul li a:hover{ color:#FF0000 } .nav ul li:hover ul li a { color:#000; } </style> </head> <body> <div class="menu"> <ul class="menu_one" > <li class="one_ulli"><a class="menu_link hide" >部门概况</a> <ul class="menu_two"> <li><a class="menu_link " href="BuJiaoDang/navlink.html" target="_blank">部门简介</a></li> <li><a class="menu_link " href="BuJiaoDang/navlink.html" target="_blank">现任领导</a></li> <li><a class="menu_link " href="BuJiaoDang/navlink.html" target="_blank">场馆简介</a></li> <li><a class="menu_link " href="BuJiaoDang/navlink.html" target="_blank">机构设置</a></li> </ul> </li> </ul> </div> </body> </html>
Cocl 2014-05-04
  • 打赏
  • 举报
回复
一说到不用js我就无力了..
whidy 2014-05-04
  • 打赏
  • 举报
回复
正好我前几天研究了一下这个.你试试这个?就是实际上有个白色下边框遮住弹出来的菜单.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {margin: 0;padding: 0;}
body {background-color: #fff;overflow: hidden;}
.container {width: 1000px;margin: 0 auto;}
.father {width: 300px;margin: 0 auto; height: 300px;border: 3px solid #f00;*overflow: hidden;}
.children {width: 250px;margin: 0 auto;height: 250px;border: 3px solid #ff0;margin-top:47px;position: relative;}
</style>
</head>
<body>
<div class="container">
	<div class="father">
		<div class="children"></div>
	</div>
</div>
</body>
</html>
Leixian 2014-05-04
  • 打赏
  • 举报
回复
这样是可以,目的是最好不要在父标签中添加 position:relative 在上边的那个标签中如果添加了position:absolute 会非常不好定位

<td>
	<div class="d_m_b">
		<input type="checkbox" name="ids" id="ids" value="0" /><span></span>
		<ul>
			<li><a href="javascript:;">全选</a></li>
			<li><a href="javascript:;">反选</a></li>
			<li><a href="javascript:;">不选</a></li>
		</ul>
	 </div>
</td>

.d_m_b {display: inline-block; padding: 6px; cursor: pointer; background:#ddd; margin:1px 1px 0 1px;}
	.d_m_b span { display:inline-block; border:0 solid #ccc; margin:0 0 0 5px; border-width:5px 5px 0; border-color:#333 #ddd; width:0; overflow:hidden; height:0; }
	.d_m_b ul { position: absolute; display: none; border:1px solid #ccc; margin:5px 0 0 -7px; position:relative;}
		.d_m_b ul li { height: 25px;}
			.d_m_b ul li a { padding: 0 20px; line-height: 25px; height: 25px; display: block; }
				.d_m_b ul li a:hover { background: #eee; }
	.d_m_b:hover {background:#fff; border: 1px solid #ccc; border-bottom:0; margin:0;}
	.d_m_b:hover span {border-width:0 5px 5px; border-color:#333 #fff;}
	.d_m_b:hover ul { display: block; background: #fff;}
这是我现在写的,如何能不在td中添加样式??
whatisma 2014-05-04
  • 打赏
  • 举报
回复
引用 1 楼 a274295732 的回复:
一说到不用js我就无力了..
这样不符合你要求?
<div style="width:50px;height:50px;position:relative;border:solid 1px red;border-bottom:none;background:#FFF;">
	<div style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;background:#FFF;">内容</div>
	<div style="width:100px;height:100px;position:absolute;top:49px;left:-1px;border:solid 1px red;z-index:1;background:#FFF;"></div>
</div>
Leixian 2014-05-04
  • 打赏
  • 举报
回复
完全不用考虑IE6,我的意思是就算是用JS,如何遮挡那条横线??像箭头指的那样
刘天空 2014-05-04
  • 打赏
  • 举报
回复
不用JS,那你要兼容哪些浏览器尼?除了a标签其它标签的伪类低版本IE不支持

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧