利用CSS製做下拉菜單

利用CSS製做下拉菜單

　　1.定義一個div，給div一個id或class,給div一個樣式.

　　　　eg:<div id="menu"></div>

　　　　/*css

　　　　　　#menu{

　　　　　　　　width:1024px;　　//給div定義一個寬度

　　　　　　　　height:40px;　　//給div定義一個高度

　　　　　　　　margin:0 auto;　　//讓div居中顯示

　　　　　　　　background-color:#eee;　　//給div一個背景顏色

　　　　　　　　}

　　　　*/

　　2.製做下拉菜單所需的無序列表（ul）.

　　　　eg:<ul>

　　　　　　　　<li><a href="#">首頁</a></li>

　　　　　　　　<li><a href="#">課程大廳</a></li>

　　　　　　　　　　<ul>

　　　　　　　　　　　　<li><a href="#">Javascript</a></li>

　　　　　　　　　　　　<li><a href="#">jQuery</a></li>

　　　　　　　　　　</ul>

　　　　　　　　<li><a href="#">學習中心</a></li>

　　　　　　　　<li><a href="#">經典案例</a></li>

　　　　　　　　<li><a href="#">關於咱們</a></li>

　　　　　</ul>

　　3.給無序列表加上樣式

　　　　/*css

　　　　　　ul{list-style:none;}　　//去掉無序列表的默認圓點

　　　　　　ul li{

　　　　　　　　float:left;　　//讓無序列表水平顯示

　　　　　　　　line-height:40px;　　//讓無序列表在垂直方向上居中

　　　　　　　　text-align:center;　　//讓無序列表在水平方向上居中

　　　　　　　　position:relative;　　//父級元素相對定位的目地是爲了讓子菜單居於上一級菜單的正下方

　　　　　　}

　　　　　　a{

　　　　　　　　text-decoration:none;　　//去除<a>的下劃線

　　　　　　　　color:#000;　　//給<a>的顏色

　　　　　　　　display:block;　　//讓<a>以塊級元素顯示

　　　　　　　　width:90px;　　//給<a>一個寬度

　　　　　　}

　　　　　　a:hover{

　　　　　　　　background-color:#666;color:#fff;

　　　　　　}　　//給鼠標滑過一個動做

　　　　　　ul li ul li{

　　　　　　　　float:none;　　//讓子菜單以垂直方向顯示

　　　　　　　　background:#eee;

　　　　　　　　margin-top:2px;　　//讓子菜單之間有2px的間距

　　　　　　}

　　　　　　ul li ul{

　　　　　　　　width:90px;

　　　　　　　　position:absolute;　　//讓子菜單居於上一級菜單的正下方

　　　　　　　　display:none;　　//正常狀態下子菜單處於隱藏狀態

　　　　　　}

　　　　　　ul li:hover ul{

　　　　　　　　display:block;　　//當鼠標滑動到父級菜單的<li>上時，相應的子菜單顯示出來

　　　　　　}

　　　　*/

 

完整代碼示例：