* { margin:0; padding:0; list-style:none; box-sizing:border-box; } .drop { width:300px; height:auto; margin:100px auto; } .drop-header { width:100%; padding:5px 10px; border:#c7c7c7 1px solid; word-wrap:break-word; min-height:32px; } .drop-header span { position:relative; display:inline-block; padding-right:5px; padding-left:5px; margin:1px 5px 1px; line-height:20px; background-color:#a9a9a9; color:#fff; cursor:pointer; } .drop-dwon { position:absolute; width:100%; height:auto; line-height:25px; border:#c7c7c7 1px solid; box-shadow:#c7c7c7 1px 1px 4px; max-height:200px; overflow-y:auto; overflow-x:hidden; } .drop-dwon li { padding:5px 10px; cursor:pointer; } .drop-dwon li:hover,.drop-dwon li.active:hover { color:#fff; background-color:#18717b; } .drop-dwon li.active { color:#fff; background-color:#07a4b5; }