css下拉菜单 主要是运用hover

Original 2019-05-06 16:53:39 188
abstract:  <!DOCTYPE html>   <html>   <head>       <meta charset="UTF-8">      &
  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
     <title>Document</title>
      <style>
          ul{
             list-style: none;
         }
         .nav>li{
             float: left;
         }
         ul a{
             display: block;
             text-decoration: none;
             width: 100px;
             height: 50px;
             text-align: center;
             line-height: 50px;
             color: white;
             background-color: #2f3e45;
         }
         .nav>li:first-child a{
             border-radius: 10px 0 0 10px;
         }
         .nav>li:last-child a{
             border-radius: 0 10px 10px 0;
         }
         .drop-down{
             /*position: relative;*/
         }
         .drop-down-content{
             padding: 0;
             display: none;
             /*position: absolute;*/
         }
         
         h3{
             font-size: 30px;
             clear: both;
         }
         .drop-down-content li:hover a{
             background-color:red;
         }
         .nav .drop-down:hover .drop-down-content{
             display: block;
         }
 </style>
 </head>
 <body>
     <ul>
         <li><a href="#">下拉菜单</a></li>
         <li><a href="#">下拉菜单</a>
             <ul>
                 <li><a href="#">我是1</a></li>
                 <li><a href="#">我是2</a></li>
                 <li><a href="#">我是3</a></li>
             </ul>
             </li>
         <li><a href="#">下拉菜单</a></li>
         <li><a href="#">下拉菜单</a></li>
         <li><a href="#">下拉菜单</a></li>
   </ul>
    <h3>我是测试文字</h3>
</body>
 </html>


Correcting teacher:查无此人Correction time:2019-05-07 09:55:24
Teacher's summary:完成的不错。css可以写成公用文件,以后随时可以使用。继续加油。

Release Notes

Popular Entries