Heim > Artikel > Web-Frontend > 二级下拉菜单a:hover样式调用不了_html/css_WEB-ITnose
二级下拉菜单a:hover样式调用不了_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:18:131155Durchsuche
我写了两个a:hover，但是二级下拉菜单始终使用的一级导航的hover，这是为嘛？我代码写的不对么？求高人指点！
<style type="text/css">/* 一级导航 */* {margin: 0; padding: 0;}ul {list-style: none;}a {text-decoration: none;}body {margin-top: 5px;}#nav {background: #39F; widht: 100%; height: 30px; line-height: 30px;}#nav ul {float: left; position: relative; left: 50%;}#nav ul li {float: left; position: relative; right: 50%;}#nav a {display: block; width: 100px; margin: 0 5px; text-align: center;}#nav a:hover {background: #FFF; color: #F00;}/* 二级导航 */.nav_list {position:absolute; left: 0; top: 30px; width: 98px; border: 1px solid #000; background: #F60; line-height: 30px; overflow: hidden;}.nav_list a {display: block; color: #FFF; width: 100px; text-align: center; color: #F00;}.nav_list a:hover {background: #0F0; color: #00F;}</style></head><body> <div id="nav"> <ul> <li><a href="#">电影</a> <div class="nav_list"> <ul> <li><a href="#">动作片</a></li> <li><a href="#">喜剧片</a></li> <li><a href="#">科幻片</a></li> </ul> </div> </li> <li><a href="#">电视剧</a></li> <li><a href="#">综艺</a></li> </ul> </div> 回复讨论(解决方案)
#nav .nav_list {position:absolute; left: 0; top: 30px; width: 98px; border: 1px solid #000; background: #F60; line-height: 30px; overflow: hidden;}#nav .nav_list a {display: block; color: #FFF; width: 100px; text-align: center; color: #F00;}#nav .nav_list a:hover {background: #0F0; color: #00F;} 修改成这样 ，原因是 选择器 根据重要性来决定优先度的 。
id选择器 的优先级别高于 类选择器
XML/HTML code?123#nav .nav_list {position:absolute; left: 0; top: 30px; width: 98px; border: 1px solid #000; background: #F60; line-height: 30px; overflow: hidden;}#nav .nav_list a {displ……
多谢，果然解决了
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：getElementById 不能获得对象。。找不出原因_html/css_WEB-ITnoseNächster Artikel：我想搞一个年份的列表框，有个小问题_html/css_WEB-ITnose