前端 day4 列表下拉

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
      
      <!--頁(yè)面基本布局-->
      <style type="text/css">
          #box{
              height: 50px;
              background-color: rgb(220,220,220);
              
              line-height: 50px;
          }
          
          
          
          /*=============下拉菜單============*/
          #menu{
              margin-left: 100px;             
              float: left;
              
              /*父標(biāo)簽寬度必須設(shè)置*/
              width: 100px;
          }
          
          /*菜單按鈕的默認(rèn)狀態(tài)*/
          #menu font{
              display: inline-block;
              /*background-color: lavenderblush;*/
              width: 100px;
              height: 50px;
              text-align: center;
          }
          
          /*彈出框出現(xiàn)的狀態(tài)*/
          #menu #content{
              width: 200px;
              height: 150px;
              background-color: white;
              
              border: 1px solid rgb(180,180,180);
              
              /*開(kāi)始隱藏*/
              display: none;
              
              margin-top: -1px;
          }
          
          /*當(dāng)鼠標(biāo)懸停在id是menu的標(biāo)簽上時(shí)，去設(shè)置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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容