为了账号安全,请及时绑定邮箱和手机立即绑定

求助。前面的都可以,就是最后一步显示不出来display:block

 <!doctype html>

 <html>

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

 </head>

  <style>

*{

padding: 0;

margin: 0;

border: 0;

}


ul{

list-style: none;

}

nav{

background-color: #eee;

width: 600px;

height: 40px;

margin: 0 auto;

}


ul li{

float: left;

position: relative;

line-height: 40px;

text-align: center;

}

a{

text-decoration: none;

display: block;

padding: 0 10px;

}

a:hover{

color: #fff;

background-color: red;

}

#erji li{

float: none;

background-color: #eee;

margin-top: 2px;

}

#erji{

position: absolute;

left: 0px;

top: 40px;

display: none;

}

#erji li a:hover{

background-color: blue;

}

nav ul li:hover ul{

display: block;

}

  </style>

 <body>

  <nav>

  <ul>

  <li><a href="">首页</a></li>

  <li><a href="">课程中心</a>

<ul id="erji">

<li><a href="">javascript</a></li>

<li><a href="">jquery</a></li>

</ul>

  </li>

  <li><a href="">经典案例</a></li>

  <li><a href="">不论是谁</a></li>

  <li><a href="">且哦怕</a></li>

  </ul>

  </nav>

 </body>

 </html>


正在回答

1 回答

把ID选择器 #erji 定义样式改为标签选择器 nav ul li ul,与选择器优先级有关,ID选择器优先级较高。

#erji{

position: absolute;

left: 0px;

top: 40px;

display: none;

}

改为

nav ul li ul{

position: absolute;

left: 0px;

top: 40px;

display:none;

}

选择器的优先级

        1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)<div style="color:Red;"></div>

        2.次优先级是(ID选择器 ,假设级别为100)   #myDiv{color:Red;}

        3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}

        4.最后优先级是 (标签选择器,假设级别是 1)  div{color:Red;}

        5.那么后代选择器的优先级就可以计算了啊

        比如 .divClass  span { color:Red;}   优先级别就是:10+1=11

        总结:对于在什么情况下使用什么样的选择器,原则有三点:一选择可以准确的找到要控制的标签;二使用最合理的优先级的选择器;三还要是html和css看起来简洁美观可读性强。

通常: 1.最常用的选择器是类选择器

         2.li  td dd 等经常大量连续出现并且样式相同或相似的情况下,一般选用类选择器和标签选择器结合的后代选择器 例:.XX li/td/dd {}

         3.极少的情况下会用ID选择器。


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
形形色色的下拉菜单
  • 参与学习       106972    人
  • 解答问题       543    个

本教程从易到难,循循渐进,运用不同技术实现动态下拉菜单

进入课程

求助。前面的都可以,就是最后一步显示不出来display:block

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信