作业 下拉菜单

原创2019-07-02 12:07:2279
摘要:<!DOCTYPE html> <html> <head>    <meta charset="UTF-8">    <title>Document</title>    <style>
<!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>


批改老师:查无此人批改时间:2019-07-02 13:13:02
老师总结:完成的不错,常用的css样式可以写到公用文件里,每个项目都可以加载这一个公用文件。继续加油。

发布手记

热门词条