首先看要實現的效果, 主要是關心技術實現, 所以沒怎么美化
![左側多級菜單欄效果圖[3]](/image/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvNzgxMjg2LzIwMTcwNC83ODEyODYtMjAxNzA0MDkxMDMzMzAxNjAtMjM2Nzg3MjY5LmdpZg==.png "左側多級菜單欄效果圖[3]")
我也是初學html, 所以寫的比較啰嗦
1. 使用列表將內容顯示出來
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/*寫css的地方*/
</style>
</head>
<body>
<div id="leftMenu">
<ul>
<li><a href="#">一級目錄1</a>
<ul>
<li><a href="#">100001</a></li>
<li><a href="#">100002</a></li>
</ul>
</li>
<li><a href="#">一級目錄2</a></li>
<li><a href="#">一級目錄3</a>
<ul>
<li><a href="#">300001</a></li>
<li><a href="#">300002</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> |
這樣會顯示如下效果
這里不好看的地方是:
A. 二級目錄預想是排在一級目錄右邊的, 但現在卻是在下面的
B. 目錄前面的小黑點和小圓圈是不需要的
2. 修改css
| <style>
*{margin: 0;padding: 0;} /*消除各種瀏覽器的邊距默認值*/
#leftMenu ul{ /*作用於id=leftMenu的元素所有含有的ul*/
width: 100px; /*寬度設置為100*/
background: #DADADA; /*增加背景色方便查看*/
list-style: none; /*去除列表的小圓點*/
}
#leftMenu li{ /*作用於id=leftMenu的元素所有含有的li*/
width: 100px; /*寬度設置為100*/
}
</style> |
嗯, 這樣好看多了, 但是二級目錄還是沒有排版到一級目錄的右邊
3. 給ul加上 position:absolute; 使ul脫離文檔流, 懸浮在原來文檔流的上面
| *{margin: 0;padding: 0;} /*消除各種瀏覽器的邊距默認值*/
#leftMenu ul{ /*作用於id=leftMenu的元素所有含有的ul*/
width: 100px; /*寬度設置為100*/
background: #DADADA; /*增加背景色方便查看*/
list-style: none; /*去除列表的小圓點*/
position:absolute;
}
#leftMenu li{ /*作用於id=leftMenu的元素所有含有的li*/
width: 100px; /*寬度設置為100*/
}
</style> |
4. 增加功能: 二級目錄默認不顯示, 鼠標懸停在一級目錄上時, 才顯示
| <style>
*{margin: 0;padding: 0;} /*消除各種瀏覽器的邊距默認值*/
#leftMenu ul{ /*作用於id=leftMenu的元素所有含有的ul*/
width: 100px; /*寬度設置為100*/
background: #DADADA; /*增加背景色方便查看*/
list-style: none; /*去除列表的小圓點*/
position:absolute;
}
#leftMenu li{ /*作用於id=leftMenu的元素所有含有的li*/
width: 100px; /*寬度設置為100*/
}
#leftMenu li>ul{ /*作用於 li的直接子元素ul */
left: 100px; /*一級目錄本身寬度100px, 所以二級目錄顯示的時候要向右偏移100px, 為什么使用的是left呢? 自己學習css吧*/
display: none; /*二級目錄默認是不顯示的*/
}
#leftMenu li:hover>ul /*當鼠標懸停在li上時, li的直接子元素ul就顯示出來*/
{display: block;} /*顯示出來*/
</style> |
5. 上面的問題是 100001 沒有與 一級目錄1 同一高度
| <style>
*{margin: 0;padding: 0;} /*消除各種瀏覽器的邊距默認值*/
#leftMenu ul{ /*作用於id=leftMenu的元素所有含有的ul*/
width: 100px; /*寬度設置為100*/
background: #DADADA; /*增加背景色方便查看*/
list-style: none; /*去除列表的小圓點*/
position:absolute;
}
#leftMenu li{ /*作用於id=leftMenu的元素所有含有的li*/
width: 100px; /*寬度設置為100*/
position: relative; /*設置為相對位置*/
}
#leftMenu li>ul{ /*作用於 li的直接子元素ul */
left: 100px; /*一級目錄本身寬度100px, 所以二級目錄顯示的時候要向右偏移100px, 為什么要用left呢? 自己學習css吧*/
top: 0; /*top的偏移位置相對於父元素為0*/
display: none; /*二級目錄默認是不顯示的*/
}
#leftMenu li:hover>ul /*當鼠標懸停在li上時, li的直接子元素ul就顯示出來*/
{display: block;} /*顯示出來*/
</style> |
6. 給一個完整界面
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0;}
#leftMenu ul{width:100px;position:absolute;background:#DADADA;list-style:none;}
#leftMenu li{width:100px;position: relative;}
#leftMenu li>ul{left: 100px;top: 0;display: none;}
#leftMenu li:hover>ul{display: block;}
</style>
</head>
<body>
<div id="leftMenu">
<ul>
<li><a href="#">一級目錄1</a>
<ul>
<li><a href="#">100001</a></li>
<li><a href="#">100002</a>
<ul>
<li><a href="#">100021</a></li>
<li><a href="#">100022</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">一級目錄2</a></li>
<li><a href="#">一級目錄3</a>
<ul>
<li><a href="#">300001</a></li>
<li><a href="#">300002</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> |
