滑鼠移上去出現下拉選單

愛學習的W發表於2019-04-09

下面是有關的HTML程式碼

<!doctype html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>滑鼠移上去出現下拉選單</title>
  <link rel="stylesheet" href="./index.css"/>
 v class="dorp">
 </head>
 <body>
    <p>我的資訊</p>
   <div class="dorp-con">
    <ul>
     <li href="#">姓名</li>
     <li href="#">學號</li>
     <li href="#">性別</li>
     <li href="#">年級</li>
    </ul>
   </div>
  </div>
 </body>
</html>

下面是有關的css程式碼

  .dorp{width:100px;
      height:30px;
      border:1px solid black;
      float:left;}
   .dorp p{text-align:center;
     font-size:20px;
     color:black;
     line-height:30px;
     margin:auto;}
   .dorp-con{width:100px;
       height:60px;
       border:1px solid black;
       display:none;  //隱藏一個元素可以通過把display屬性設定為"none"
       margin-left:-1px;}
   .dorp:hover .dorp-con{display:block;} //讓隱藏的元素顯示出來
   .dorp-con ul{margin:0 0;}
   .dorp-con li{font-size:12px;
       width:100px;
       height:15px;
       line-height:15px;
       margin-left:-30px;}
   li{list-style:none;}

相關文章