emmm...做的比較醜...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>橫向菜單</title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } .wrap{ width: 600px; margin: 0 auto; } a{ text-decoration: none; } .menu{ width: 90px; background: greenyellow; margin: 5px auto; position: relative; text-align: center; transition-duration: 0.5s;/*顏色轉變時間*/ /*float: left;*/ } .menu:hover{ background: pink; transition-duration: 0.5s; } .menu ul{ width: 90px; display: none; background: aqua; position: absolute; top:0px; left:90px; border: 1px solid cornflowerblue; } .menu ul li{ list-style-type: none; } .menu ul li a { display: block; padding: 5px 10px; border-bottom: 1px solid transparent; } .menu ul li a:hover{ background: yellow; border-bottom: 1px solid cornflowerblue; } .menu:hover .select_app{ display: block; transition-duration: 0.5s; } </style></head><body><p class="wrap"> <p class="menu"> <a href="#" class="app">應用</a> <ul class="select_app"> <li><a href="#">聊天應用</a></li> <li><a href="#">遊戲應用</a></li> <li><a href="#">天氣應用</a></li> <li><a href="#">其他應用</a></li> <li><a href="#">聊天應用</a></li> </ul> </p> <p class="menu"> <a href="#" class="app">應用</a> <ul class="select_app"> <li><a href="#">聊天應用</a></li> <li><a href="#">遊戲應用</a></li> <li><a href="#">天氣應用</a></li> <li><a href="#">其他應用</a></li> <li><a href="#">聊天應用</a></li> </ul> </p> <p class="menu"> <a href="#" class="app">應用</a> <ul class="select_app"> <li><a href="#">聊天應用</a></li> <li><a href="#">遊戲應用</a></li> <li><a href="#">天氣應用</a></li> <li><a href="#">其他應用</a></li> <li><a href="#">聊天應用</a></li> </ul> </p> <p class="menu"> <a href="#" class="app">應用</a> <ul class="select_app"> <li><a href="#">聊天應用</a></li> <li><a href="#">遊戲應用</a></li> <li><a href="#">天氣應用</a></li> <li><a href="#">其他應用</a></li> <li><a href="#">聊天應用</a></li> </ul> </p></p></body></html>
本文講解了關於如何通過css3+html5實現縱向菜單 ,更多相關內容請關注php中文網。