纯CSS+XHTML打造简约下拉菜单

 首页 > 网页特效 > 菜单特效 > 纯CSS+XHTML打造简约下拉菜单

纯CSS+XHTML打造简约下拉菜单

 2018-07-11  521  收藏  0 赞一个  0 真差劲  0 去评论

<!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>纯CSS+XHTML简约下拉菜单</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
body {
	font:12px Verdana, Geneva, sans-serif #333;
	line-height:1.5;
}
ul li {
	list-style:none;
}
.menu {
	width:660px;
	margin:20px auto;
}
.menu li {
	display:inline;
	float:left;
	margin:0 5px;
	background:#f2f2f2;
	border:1px #39c solid;
	text-align:center;
	font-size:14px;
	font-weight:700;
	line-height:30px;
	cursor:pointer;
	filter:alpha(opacity=75); /* IE通用,值越小越透明 */
                 -moz-opacity:0.7;/* FF专属,取值为IE中透明度的百分之一 */	
}
.tuckUp {
	display:inline;
	width:120px;
	height:30px;
	overflow:hidden;
	background:#f2f2f2;
}
.pullDown{
	display:inline;
	height:auto;
}
.item a:link, .item a:visited {
    display:inline;
	float:left;
	width:110px;
	background:#ccc;
	text-align:center;
	color:#444;
	font-size:12px;
	font-weight:normal;
	text-decoration:none;
	line-height:25px;
	margin:0 5px 5px 5px;
}
.item a:hover {
	display:inline;
	float:left;
	background:#39c;
	width:100px;
	color:#FFF;
	text-decoration:none;
	text-align:center;
	font-size:12px;
	font-weight:700;
	font-weight:normal;
	line-height:25px;
	padding:0 0 0 10px;
	margin:0 5px 5px 5px;
}
.contant{
	position:absolute;
	left:50%;/* 层居中对齐 */
	top:60px;/* 距顶的距离 */
	margin:0 0 0 -480px;/* 由层宽度决定 */
	width:960px;/* 层距左值的绝对值的二倍 */
	height:200px;
	background:#f93;
                text-align:center;
	z-index:-10;/* 层顺序,最好负值 */
}
//
-->
</style>
</head>
<body>
<ul class="menu">
  <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">MenuOne
    <div class="item"><a href="/">ITEM01</a></a><br />
      <a href="/">ITEM02</a></a><br />
      <a href="/">ITEM03</a><br />
</div>
  </li>
  <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">MenuTwo
    <div class="item"><a href="/">ITEM01</a><br />
      <a href="/">ITEM02</a><br />
</div>
  </li>
  <li class="tuckUp" onmouseover="this.className='pullDown'" onmouseout="this.className='tuckUp'">MenuThree
    <div class="item" ><a href="#">ITEM01</a><br />
      <a href="/">ITEM02</a><br />
      <a href="/">ITEM03</a><br />
</div>
  </li>
  <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">MenuFour
    <div class="item"><a href="#">ITEM01</a><br />
      <a href="/">ITEM04</a><br />
      <a href="/">ITEM05</a><br /></div>
  </li>
  <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">MenuFive
    <div class="item"><a href="#">ITEM01</a><br />
      <a href="/">ITEM02</a><br />
      <a href="/">ITEM03</a><br />
</div>
  </li>
</ul>
<div class="contant"><h1>鼠标滑上菜单,它不再动弹...:)</h1></div>
</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

简约下拉菜单，基于纯CSS+XHTML制作实现，一方面是想表现菜单，另一方面是想说明如何固定菜单下方的DIV，说起来还有点复杂，你最好看看代码吧，本人表达能力欠佳，怕越说越糊涂了，上边的二级菜单展开的时候，下边的Div不随菜单往下坠，因为以前很多朋友都遇到过菜单展开后影响到其它DIV的情况。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行