console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
<style>
dl{
width:500px;
height:170px;
border:10px solid #eeeeee;
border-radius:40px 0 0 40px;
background-color:#5e8d4b;
}
dt{
float:right;
}
dd{
margin:0;
width:415px;
height:170px;
overflow:hidden;
}
ul{
list-style:none;
padding:0;
margin:0;
width:500px;
height:170px;
}
li{
margin-top:5px;
padding-left:20px;
width:405px;
height:27px;
color:#ffffff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
dt a{
display:block;
margin:1px;
width:80px;
height:55px;
text-align:center;
color:#ffffff;
background:#666666;
text-decoration:none;
}
dd a{
margin-top:5px;
line-height:36px;
color:#ffffff;
text-decoration:none;
}
dt a:hover{
color:#334d4c;
background:#99e6e3;
}
</style>
</head>
<body>
<dl>
<dt><a href="#a">小学古诗</a><a href="#b">初中古诗</a><a href="#c">高中古诗</a></dt>
<dd>
<ul id="a">
<li><a href="#">静夜思-李白（床前明月光，疑是地上霜。。。。。</a></li>
<li><a href="#">静夜思-李白（床前明月光，疑是地上霜。。。。。</a></li>
</ul>
<ul id="b">
<li><a href="#">静a时登的床前明月光，疑是地上霜。。。。。</a></li>
<li><a href="#">as的床前明月光，疑是地上霜。。。。。</a></li>
</ul>
<ul id="c">
<li><a href="#">静a时asasdasd疑是地上霜。。。。。</a></li>
<li><a href="#">aasdasd疑是地上霜。。。。。</a></li>
</ul>
</dd>
</dl>
</body>
</html>