使用css实现鼠标移入一级菜单，出现底部下滑线 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style>
 8             ul,li{
 9                 list-style: none;
10             }
11             a{
12                 color: #00B83F;
13                 text-decoration: none;
14             }
15             .nav {
16                 width: 95%;
17                 height: 50px;
18                 margin: 0 auto;
19                 font-size: 14px;
20             }
21             
22             .nav_l {
23                 width: 800px;
24             }
25             
26             .nav_l ul li {
27                 text-align: center;
28                 width: 92px;
29                 height: 50px;
30                 line-height: 50px;
31                 float: left;
32                 position: relative;
33                 /*margin-right: 28px;*/
34                 /*border-bottom:2px solid #efeff8 ;*/
35             }
36             
37             .nav_l ul .manu:before {
38                 content: '';
39                 display: none;
40                 width: 100%;
41                 height: 2px;
42                 background: #126EB7;
43                 position: absolute;
44                 top: 47px;
45                 left: 0px;
46             }
47             
48             .nav_l ul li.manu:hover:before {
49                 content: '';
50                 display: block;
51                 width: 100%;
52                 height: 2px;
53                 background: #126EB7;
54                 position: absolute;
55                 top: 47px;
56                 left: 0px;
57             }
58         </style>
59     </head>
60 
61     <body>
62         <nav>
63             <div class="nav_wrap">
64                 <div class="nav">
65                     <div class="nav_l">
66                         <ul id="manu_ul">
67                         
68                             <li class="manu">
69                                 <a >诸葛青云</a>
70                             </li>
71                             <li class="manu">
72                                 <a href="javascript:;">诸葛青云</a>
73                             </li>
74                             <li class="manu">
75                                 <a >诸葛青云</a>
76                             </li>
77                             <li class="manu">
78                                 <a href="javascript:;">诸葛青云</a>
79                             </li>
80                         </ul>
81                     </div>
82                 </div>
83             </div>
84         </nav>
85 
86     </body>
87 
88 </html>

 

posted @ 2018-01-24 14:57  我哼哼  阅读(555)  评论(0)    收藏  举报