<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>左側下拉菜單</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.wrap{
width: 260px;
height: 100%;
background-color: #363a45;
}
.head{
width: 260px;
height: 60px;
background-color: #44495a;
line-height: 60px;
text-align: center;
color: #fff;
font-size: 20px;
}
.nav{
width: 250px;
margin: 10px 5px;
}
.nav-list h2{
position: relative;
width: 100%;
height: 50px;
background-color: #3889d4;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 15px;
transform: 0.5s; /* css3過渡效果 */
}
.nav-list h2.on{
background-color: #393c4a;
}
.nav-list{
margin-bottom: 5px;
}
.nav-list i{
position: absolute;
right: 10px;
top: 16px;
border: 8px solid transparent;
border-left-color: #fff;
transform-origin: 1px
![Python GUI程式設計利器：Tkinker中的文本輸入框和下拉菜單(4)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)