如何使用CSS完成图一到图二的下拉列表（当鼠标移动到该位置时，显示出来）

2023-03-03 01:46:01html-css016

如何使用CSS完成图一到图二的下拉列表（当鼠标移动到该位置时，显示出来）,第1张

单纯用css肯定不能实现这种效果，需要用到jQuery，代码如下：

然后再用css去修改样式就好。

<!DOCTYPE html>

<head>

<title>jquery下拉菜单</title>

<style>

* { margin: 0 padding: 0 }

body {font-family: Arial, Tahoma, sans-serif font-size: 11px color: #232323 }

.wrap { width: 800px margin: 0 auto }

#nav { margin: 0 padding: 0 list-style: none border-left: 1px solid #d5dce8 border-right: 1px solid #d5dce8 border-bottom: 1px solid #d5dce8 border-bottom-left-radius: 4px -moz-border-radius-bottomleft: 4px -webkit-border-bottom-left-radius: 4px border-bottom-right-radius: 4px -moz-border-radius-bottomright: 4px -webkit-border-bottom-right-radius: 4px height: 50px padding-left: 15px padding-right: 15px background: #edf3f7 }

#nav li { float: left display: block background: none position: relative z-index: 999 margin: 0 1px }

#nav li a { display: block padding: 0 font-weight: 700 line-height: 50px text-decoration: none color: #818ba3 zoom: 1 border-left: 1px solid transparent border-right: 1px solid transparent padding: 0px 12px }

#nav li a:hover, #nav li a.hov { background-color: #fff border-left: 1px solid #d5dce8 border-right: 1px solid #d5dce8 color: #576482 }

#nav ul { position: absolute left: 1px display: none margin: 0 padding: 0 list-style: none -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2) -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2) box-shadow: 0 1px 3px rgba(0,0,0,0.2) -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2) padding-bottom: 3px }

#nav ul li { width: 180px float: left border-top: 1px solid #fff text-align: left }

#nav ul li:hover { border-left: 0px solid transparent border-right: 0px solid transparent }

#nav ul a { display: block height: 20px line-height: 20px padding: 8px 5px color: #666 border-bottom: 1px solid transparent text-transform: uppercase color: #797979 font-weight: normal }

#nav ul a:hover { text-decoration: none border-right-color: transparent border-left-color: transparent background: transparent color: #4e4e4e }

* html #nav ul { margin: 0 0 0 -2px }

.clearfix:after { content: "." display: block clear: both visibility: hidden line-height: 0 height: 0 }

.clearfix { display: inline-block }

html[xmlns] .clearfix { display: block }

* html .clearfix { height: 1% }

</style>

</head>

<body>

<ul>

<li><a href="#">Company</a></li>

<li><a href="#">Authors</a></li>

<li><a href="#">Advertising</a></li>

</ul>

</li>

<li><a href="#">RSS订阅</a>

<ul>

<li><a href="#">Patterns</a></li>

<li><a href="#">Icons</a></li>

</ul>

</li>

<ul>

<li><a href="#">jQuery</a></li>

<li><a href="#">MySQL</a></li>

</ul>

</li>

<li><a href="#">Web工具</a>

<ul>

<li><a href="#">Performance</a></li>

<li><a href="#">CMS Plugins</a></li>

<li><a href="#">Cheat Sheets</a></li>

</ul>

</li>

<li><a href="#">Originals</a>

<ul>

<li><a href="#">Website Design</a></li>

<li><a href="#">Mobile</a></li>

</ul>

</li>

</ul>

</div>

$(document).ready(function() {

$('#nav li').hover(function() {

$('ul', this).slideDown(200)

$(this).children('a:first').addClass("hov")

}, function() {

$('ul', this).slideUp(100)

$(this).children('a:first').removeClass("hov")

})

</script>

</body>

</html>

呃你这样写标签只能兼容支持HTML5的浏览器哦～

在details标签外加一个相对定位的div 把details定义为绝对定位就可以了。

样式里我加了个背景颜色你可以去掉。

<style>

.box{height:20pxposition:relative}

.box details{position:absoluteleft:0top:0 background-color:#fff}

</style>

我最喜欢的电影，你喜欢吗？

</details>

</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>纯CSS的下拉菜单支持IE6 IE7 Firefox</title>

*{margin:0padding:0}

.menu{font-size:12pxposition:relativez-index:100}

.menu ul{list-style:none}

.menu li {float:leftposition:relative}

.menu ul ul {visibility:hiddenposition:absoluteleft:3pxtop:23px}

.menu table {position:absolutetop:0left:0}

.menu ul li:hover ul,

.menu ul a:hover ul{visibility:visible}

.menu a{display:blockborder:1px solid #aaabackground:#cacacapadding:2px 10pxmargin:3pxcolor:#ffftext-decoration:none}

.menu a:hover{background:#fafafacolor:#000border:1px solid #000}

.menu ul ul{}

.menu ul ul li {clear:bothtext-align:leftfont-size:12px}

.menu ul ul li a{display:blockwidth:100pxheight:15pxmargin:0border:0border-bottom:1px solid #858585}

.menu ul ul li a:hover{border:0background:#fafafaborder-bottom:1px solid #fff}

</style>

</head>

<body>

<ul>

<li><a href="#">XHTML/CSS

</a>

<ul>

<li><a href="#">布局教程专题</a></li>

<li><a href="#">CSS菜单</a></li>

<li><a href="#">浏览器兼容</a></li>

<li><a href="#">滚动条相关</a></li>

<li><a href="#">圆角矩形专题</a></li>

<li><a href="#">CSS特效欣赏专题</a></li>

</ul>

</li>

<li><a href="#">07艺术

</a>

<ul>

<li><a href="#">网页教学网</a></li>

</ul>

</li>

<li><a href="#">Javascript

</a>

<ul>

</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="#">Flash</a></li>

<li><a href="#">Dreamweaver</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：电脑属于办公用品吗?

# 下一篇：如何利用WPS文字将书本中的文字录入电脑

推荐阅读

热门文章

最新发布

标签列表

如何使用CSS完成图一到图二的下拉列表（当鼠标移动到该位置时，显示出来）

给您推荐相同类型的内容：