css下拉框小结

原创 2018-11-08 01:11:09 203
摘要:<!DOCTYPE html><html>      <head>            <meta charset="uf8">            <title>京

<!DOCTYPE html>

<html>

      <head>

            <meta charset="uf8">

            <title>京东导航</title>

                      

           <link rel="stylesheet type="text/css" href="456.css">

           <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" 

      </head>

       <body>

             <div class="beader">

               <div class="beader_a">

                  <div class="beader_b">

                  <a href="#" class="div_a">你好,请登录</a>

                  <a href="#" style="color:#F10215;margin-left:8px;">免费注册</a>

                  <a href="#" class="div_a"><span>|</span>我的订单<span>|</span></a>

                  <a href="#" class="div_b">我的京东&nbsp;&nbsp;<i class="fa fa-angle-down"></i>

                      <div class="beader_d">

                       <div class="beader_c">

                          <ul class="ul_a">

                               <li><a href="#">待处理订单</a></li>

                               <li><a href="#">返修退货单</a></li>

                               <li><a href="#">降价商品</a></li>

                           </ul>

                           <ul class="ul_b">

                               <li><a href="#">消息</a></li>

                               <li><a href="#">我的回答</a></li>  

                               <li><a href="#">我的关注</a></li>  

                           </ul>

                         </div>

                         <div class="beader_e">

                               <ul class="ul_c">

                                  <li><a href="#">我的京豆</a></li>

                                  <li><a href="#">我的白条</a></li>

                               </ul>

                               <ul class="ul_d"> 

                                   <li><a href="#">我的优惠券</a></li>

                                   <li><a href="#">我的理财</a></li>

                              </ul>

                         </div>

                       

                     </div>

                  </a><span>|</span>

                     

                  <a href="#" class="div_a">京东会员</a><span>|</span>

                  <a href="#" class="div_b">企业采购&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a><span>|</span>

                  <a href="#" class="div_c">客户服务&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a><span>|</span>

                  <a href="#" class="div_c">网站导航&nbsp;&nbsp;<i class="fa fa-angle-down"></i></a><span>|</span>

                  <a href="#">手机京东</a>

                  </div>

              </div>

             </div>

             <div class="clear">

                 

             </div>





         </body>

</html>





*{margin:0px 0px;padding:0px 0px;}

            a{text-decoration:none;}

            ul li{list-style:none;}

            .clear{clear:both;}

            .beader{width:100%;height:40px;background:#E3E4E5;}

            .beader_a{width:1190px;height:40px;margin:0px auto;}

            .beader_b{width:740px;height:40px;float:right;line-height:40px;}

            .beader_b a{font-size:12px;color:#9FA0A0;position:relative;}

            span{margin:0px 5px;color:#ccc;#9FA0A0;}

            

            .div_b{width:80px;height:40px;text-align:center;}

            .div_c{width:80px;height:40px;text-align:center;}

            .div_a:hover{color:#E97881}

            .div_b:hover{color:#E97881;border-bottom:none;}

            .div_b:hover{background-color:#FFFFFF}

            .div_c:hover{background-color:#FFFFFF}

            .beader_d{width:300px;height:200px;border:1px solid #ccc;position:absolute;border-top:none;display:none;}

            .beader_c{width:280px;height:90px;border:1px solid #ccc;line-height:30px;padding:10px 10px;border-top:none;}

            .ul_a{float:left;} 

            .ul_b{float:left;margin:0px 0px 5px 80px;} 

            .beader_e{width:280px;height:70px;border:1px solid #ccc;border-top:none;font-size:12px;color:#9FA0A0;

               line-height:35px;padding:10px 10px;}

            .ul_c{float:left;} 

            .ul_d{float:left;margin:0px 0px 5px 90px;}

            .beader_d li a:hover{color:#E97881}

            .div_b:hover div{display:block;}

            

老师,您好,为啥我的下拉框不显示在“我的京豆”下,还有隐藏之后,编程hover:{display:block;}后没显示,我找了很久找不到问题出在哪,请教下老师,我在哪个地方出错了,谢谢。

批改老师:灭绝师太批改时间:2018-11-08 09:14:21
老师总结:因为你在a链接中直接嵌套的下拉菜单可定不行,你在外层再套一个a链接,你测试一下,不行把问题提交到工单

发布手记

热门词条