<div id="dhl">
      <ul>
        <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>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div>

#dhl ul{
    width:200px;
}
#dhl ul li{
	list-style-type:none;
	background-color:#999;
}
#dhl ul li a{
	text-decoration:none;
	display:block;
	color:#333;
	padding:10px;
	text-align:center;
	border-left:15px solid red;
	border-bottom:1px solid red;
	border-right:1px solid red;
}
#dhl ul li a:hover{
	color:red;
	background-color:green;
}

    <div id="dht">
      <ul>
        <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>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div>

#dht ul{
	width:1200px;
}
#dht ul li{
	float:left;
	list-style-type:none;
	background-color:#666;
	width:200px;
	text-align:center;
}
#dht ul li a{
	text-decoration:none;
	display:block;
	color:#999;
	padding:10px;
}
#dht ul li a:hover{
	color:red;
	background-color:green;
}

    <div id="dhn">
      <ul>
        <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>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div>

#dhn{
	padding-top:50px;
}
#dhn ul{
    width:200px;
}
#dhn ul li{
	list-style-type:none;
}
#dhn ul li a{
	text-decoration:none;
	display:block;
	color:#333;
	padding:10px;
	text-align:center;
	border-bottom:1px dotted red;
}
#dhn ul li a:hover{
	color:red;
	background-color:green;
}