1） 縱嚮導航菜單
<styletype="text/css">
body { font-family: Verdana;font-size: 12px; line-height: 1.5; }
a { color: #000;text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 100px; border:1px solid #CCC; }
#menu ul { list-style: none;margin: 0px; padding: 0px; }
#menu ul li { background:#eee; padding: 0px 8px; height: 26px; line-height: 26px;
border-bottom: 1px solid #CCC; }
</style>
<body>
<divid="menu">
<ul>
<li><ahref="@#">首頁</a></li>
<li><ahref="#">網頁版式布局</a></li>
</ul>
</div>
</body>
預設樣式是指，ul標籤預設樣式前面原點，載入圖片帶邊框等，去掉預設樣式方法：
ul{list-style:none;}
img{border-style=none;}
css派生選取器：有助於節約大量class的定義。#menu ul和#menu ul li即為派生選取器，只對id為menu的ul生效，屬性可以被id為menu下的li繼承。
2） 二級快顯功能表
當滑鼠放到一級菜單上後，彈出相應的二級菜單，移去滑鼠後自動消失。
<style type="text/css">
body { font-family: Verdana;font-size: 12px; line-height: 1.5; }
img { border-style: none; }
a { color: #000;text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 100px; border:1px solid #CCC; border-bottom:none;}
#menu ul { list-style: none;margin: 0px; padding: 0px; }
#menu ul li { background:#eee; padding: 0px 8px; height: 26px; line-height: 26px;
border-bottom: 1px solid #CCC;position:relative; }
#menu ul li ul { display:none;position: absolute; left: 100px; top: 0px; width:100px;
border:1px solid #ccc;border-bottom:none; }
#menu ul li.current ul {display:block;}
#menu ul li:hover ul {display:block;}
</style>
<div id="menu">
<ul>
<li><ahref="#">首頁</a></li>
<li><ahref="#">視頻教程</a>
<ul>
<li><ahref="#">工具</a></li>
<li><ahref="#">書籤</a></li>
</ul>
</li>
<li><ahref="#">資料下載</a>
<ul>
<li><ahref="#">醫院</a></li>
<li><ahref="#">學校</a></li>
</ul>
</li>
</ul>
</div>
#menu ul li:hover ul { display:block;}代表當滑鼠放置到一級菜單時，二級菜單顯示。display屬性none表示元素隱藏；block表示顯示。
position定位屬性，值relative表示如果對一個元素進行相對定位，首先它將出現在它所在的位置，然後相對於原始起點進行水平或垂直的移動。無論是否移動，元素仍然佔據原來的空間； 值absolute表示絕對位置，依據瀏覽器左上方開始計算，絕對位置使元素脫離文檔流，因此不佔據空間，普通文檔流中元素的布局就像絕對位置的元素不存在一樣，絕對位置的元素與文檔流無關，可以覆蓋頁面上其他元素，可通過z-index來控制層級次序，值越高顯示越在上層。
父容器使用相對定位，子項目使用絕對位置後，子項目不再相對於瀏覽器左上方，而是相對於父容器左上方。相對定位和絕對位置需要配合top、right、bottom、left來定位具體位置。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
