完成效果：
這應該是很簡單的縱向導航欄了。
OK，進入正題
首先，我們看上面的效果圖可以分析得出，要實現這個效果需要用到的技術點
1.hover
2.position
3.布局
我認為在這個效果的實現上最需要注意的就是position,當我們在給子元素用absolute的時候，一定不要忘了個其父元素設置relative,否則容易出錯，這里可以簡單記為“父相子絕”
ok，看代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style type="text/css"> .all{ position: fixed; top: 100px; left: 20px; } /*父元素*/ .menu{ width: 50px; height: 50px; border-bottom: 1px solid #6A6A6A; background-color: #43433E; text-align: center; position: relative; } a{ display: block; width: 50px; height: 50px; text-decoration: none; color: white; line-height: 50px; } /*子元素*/ .son{ width: 150px; height: 50px; color: white; text-align: center; background-color: #43433E; position: absolute; left: 60px; top: 0; display: none; } a:hover{ background-color: #FA7C03; } .menu:hover .son{ display: block; } </style> </head> <body> <div class="all"> <div class="menu"> <a href="#"><span>早上</span></a> <div class="son"> <p>吃飯，喝水</p> </div> </div> <div class="menu"> <a href="#"><span>中午</span></a> <div class="son"> <p>吃飯，喝水</p> </div> </div> <div class="menu"> <a href="#"><span>晚上</span></a> <div class="son"> <p>吃飯，喝水，喝牛奶</p> </div> </div> </div> </body> </html>