不过一般你这种情况，box变形和字不见，应该是由于box的宽高和box内元素的大小的冲突，简单点说就内容超出把box给挤的，跟boder没有必然联系(不过border是有宽高的，所以要注意把这部分宽高计算在内)。这种情况是布局的不合理造成的，需要调整到更合理布局，这要靠平时积累的经验和技巧，一时半会也教不会的
我大概给你写了一下 看看是不是你要的效果<title>无标题文档</title>
<style type="text/css">
.top{ height:18pxborder-bottom:1px solid red}
li{ list-style-type:none
float:left
width:100px
margin-left:10px
background-color:#606060
text-align:center
font-size:12px
line-height:18px
}
li:hover{ list-style-type:none
float:left
width:100px
margin-left:10px
background-color:red
text-align:center
font-size:12px
line-height:18px}
.bottom{ border-left:1px solid redborder-right:1px solid redheight:20px}
</style>
</head>
<body>
<div class="top">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="bottom"></div>
</body>
