HTML5-網頁標欄的下拉選單

萬里無雲便是我發表於2017-11-05
HTML網頁
/* 
*Copyright (c) 2017，煙臺大學計算機學院 
All rights reserved. 
*檔名稱：關於HTML的練習
*作    者：張晴晴 
*完成日期：201711月5日 
*版 本 號：v1.0  * 
*問題描述：HTML5的新特性 
*輸入描述： 無
*程式輸出： 無
*/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網頁橫欄-下拉選單</title>
<style>
   body{ 
 font-size:16px;
 font-family:"仿宋";/*body裡面設定字型*/
 }
 
   #nav{
    line-height:40px;
    list-style-type:none;
    padding:0px;
    width:100%;
    }
   #nav ul{
  line-height:40px;
  position:absolute;
  left:-100000px;
  padding:0px;/*定義元素邊框和元素內容之間的距離*/
  }
  
    #nav li{
  float:left;
  /*display:inline;*//*使之在一行上顯示*/
  background-color:red;
  width:100px;
  }
 #nav a{
     padding:10px 30px;/*一層網路連線的相對位置*/
  color:yellow;/*連結本來的顏色*/
  text-decoration:none;
  }
    #nav a:hover{/*hover設定滑鼠移動到a上面時的樣式*/
  color:white;/*滑鼠指向連結顯示的顏色*/
  background-color:blue;/*滑鼠指示背景顯示顏色*/
  list-style-type:none;
  }
  
 #nav li:hover ul{/*指定下拉選單出現的位置*/
  left:auto;   /*left 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。*/
  }
 #nav ul li{/*下拉子選單中所有內容*/
  background-color:green;
  list-style-type:none;
  clear:left;/*規定哪一側不允許浮動元素*/
  }
    #nav ul a{/*二層下拉選單中的樣式*/
  text-decoration:none;
     padding:5px;
  color:black;}/*連結本來的顏色*/
</style>
</head>
<body>
<ul id="nav">
    <li><a href="">c++</a>
            <ul>
            <li><a href="">子選單1-1</a></li>
            <li><a href="">子選單1-2</a></li>
            <li><a href="">子選單1-3</a></li>
            <li><a href="">子選單1-4</a></li>
            </ul>
   </li>
    <li> <a href="">java</a>
            <ul>
            <li><a href="">子選單1-1</a></li>
            <li><a href="">子選單1-2</a></li>
            <li><a href="">子選單1-3</a></li>
            <li><a href="">子選單1-4</a></li>
            </ul>
   </li>
    <li> <a href="">c</a>
   <ul>
            <li><a href="">子選單1-1</a></li>
            <li><a href="">子選單1-2</a></li>
            <li><a href="">子選單1-3</a></li>
            <li><a href="">子選單1-4</a></li>
   </ul>
 </li>
 <li>  <a href="">c#</a>
            <ul>
            <li><a href="">子選單1-1</a></li>
            <li><a href="">子選單1-2</a></li>
            <li><a href="">子選單1-3</a></li>
            <li><a href="">子選單1-4</a></li>
            </ul>
 </li>
 <li>  <a href="">html</a>
            <ul>
            <li><a href="">子選單1-1</a></li>
            <li><a href="">子選單1-2</a></li>
            <li><a href="">子選單1-3</a></li>
            <li><a href="">子選單1-4</a></li>
            </ul>
 </li>
 <li><a href="">ar</a>
            <ul>
            <li><a href="">子選單1-1</a></li>
            <li><a href="">子選單1-2</a></li>
            <li><a href="">子選單1-3</a></li>
            <li><a href="">子選單1-4</a></li>
            </ul>
 </li>
</ul>




</body>
</html>

執行結果：





相關文章