前端 day4 列表下拉

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
      
      <!--页面基本布局-->
      <style type="text/css">
          #box{
              height: 50px;
              background-color: rgb(220,220,220);
              
              line-height: 50px;
          }
          
          
          
          /*=============下拉菜单============*/
          #menu{
              margin-left: 100px;             
              float: left;
              
              /*父标签宽度必须设置*/
              width: 100px;
          }
          
          /*菜单按钮的默认状态*/
          #menu font{
              display: inline-block;
              /*background-color: lavenderblush;*/
              width: 100px;
              height: 50px;
              text-align: center;
          }
          
          /*弹出框出现的状态*/
          #menu #content{
              width: 200px;
              height: 150px;
              background-color: white;
              
              border: 1px solid rgb(180,180,180);
              
              /*开始隐藏*/
              display: none;
              
              margin-top: -1px;
          }
          
          /*当鼠标悬停在id是menu的标签上时，去设置id是content的样式*/
          #menu:hover #content{
              display: block;
          }
          
          #menu:hover font{
              border-left: 1px solid rgb(180,180,180);
              border-right: 1px solid rgb(180,180,180);
              border-top: 1px solid rgb(180,180,180);
              
              background-color: white
          }
          
          
          
          /*其他菜单*/
          .other{
              float: left;
              width: 100px;
              height: 50px;
              /*background-color: yellowgreen;*/
          }
          
          
      </style>
      
  </head>
  <body>
      <div id="box">
          <!--下拉菜单-->
          <div id="menu">
              <font>下拉菜单</font>
              <div id="content"></div>
          </div>
          
          
          <!--其他菜单-->
          <div class="other">
              
          </div>
          
      </div>
  </body>
</html>
前端 day4 列表下拉

推荐阅读更多精彩内容
