Heim >Web-Frontend >HTML-Tutorial >请大家给我看看这个下拉菜单到底怎么了_html/css_WEB-ITnose
请大家给我看看这个下拉菜单到底怎么了_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:12:47993Durchsuche
<!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 runat="server"> <title>123</title> <link href="style.css" rel="stylesheet" type="text/css" /><!-- saved from url=(0013)about:internet --></head><div id="bar"> <div id="nav"> <ul> <li><a href="#" target="_blank">网站主页</a> </li> <li><a href="#" target="_blank">文档管理</a> <ul style="z-index:88;"> <li>类别管理</li> <li>信息管理</li> <li>文档下载</li> <li>文档上传</li> </ul> </li> <li><a href="#" target="_blank">用户管理</a> <ul style="z-index:99;"> <li>用户管理</li> <li>用户管理</li> <li>用户管理</li> <li>用户管理</li> <li>用户管理</li> </ul> </li> <li><a href="#" target="_blank">留言建议</a> </li> </ul> </div></div> </body></html>
a{ text-decoration:none;}#bar{ width:100%; height:40px; z-index:999; padding-top:5px; background:url(bar_bg.gif) repeat-x; }#nav{ width:960px; height:30px; margin:0 auto; }#nav ul { padding:0; margin:0; list-style-type: none; }#nav ul li{ list-style:none; float:left; position:relative; width:100px; }#nav ul li a{ display:block; text-align:center; line-height:28px; padding-left:9px; padding-right:9px; color:#bdbde2; height:30px; }#nav ul li:hover a{ background-color:#000066; color:#00FF99; }#nav ul li ul { display: none; }#nav ul li:hover ul { display:block; top:30px; position:absolute; width:80px; color:#00FF99; text-align:center; }#nav ul li:hover ul li { background-color:#333333; display:block; color:#bdbde2; height:28px; padding-top:4px; width:100px; }#nav ul li:hover ul li a { display:block; color:#bdbde2; background:#1C5579; }#nav ul li:hover ul li a:hover { background-color:#000066; color:#00FF99; } 这是源码请高手看一下
回复讨论(解决方案)
木有感?你的感?...你有啥感?大??出?.
楼主是不是在ie6下 看的效果？
要问 为什么 li:hover 无反应?
ie6支持除a之外的伪类,可以用js来做,onmouseover 与 onmouseout
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：求 2种 图片滚动效果 源代码。_html/css_WEB-ITnoseNächster Artikel：html拼接问题_html/css_WEB-ITnose