* { margin:0; padding:0; list-style:none; text-decoration:none; } body { background-color:#f4f4f4; } .wrapper { margin:100px; position:relative; } .wrapper .main { display:inline-block; width:100px; height:120px; border:1px solid #ccc; background-color:#fff; } .wrapper .main li a { line-height:30px; color:#000; padding-left:8px; width:92px; display:inline-block; } .wrapper .sub ul { width:200px; height:200px; border:1px solid #ccc; position:absolute; left:100px; top:0; background-color:#fff; } .wrapper .sub ul li { width:46%; float:left; height:25px; } .wrapper .sub ul li a { color:#333; padding:0 8px; } .wrapper .sub ul li:hover a { background:#d44; border-radius:2px; } .none { display:none; } .active { background-color:#ddd; }