纯CSS+DIV实现的竖向菜单-CSDN博客

本文介绍了一种仅使用CSS实现竖向菜单的方法。通过巧妙地利用CSS的属性如:hover、relative与absolute定位以及边框技巧，实现了具有美观悬浮效果的菜单项。此方法无需JavaScript，适用于希望简化网页结构并提高加载速度的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>纯CSS+DIV实现的竖向菜单</title> 
<style> 
.menu{ 
width:200px; 
} 
.menu a,.menu a:visited{ 
text-decoration:none;/*文字无下滑线*/ 
text-align:center;/*文字水平居中对齐*/ 
color:#c00;/*红色文字*/ 
display:block;/*设置为块状元素*/ 
padding:4px;/*内边距*/ 
background:#FFF;/*背景色*/ 
border: 1px solid #fff;/*与背景色相同边框，防止跳动*/ 
width:130px; 
position:relative;/*使用相对定位*/ 
} 
.menu a:hover{ 
border:solid 1px #c00;/*边框颜色红色*/ 
} 
.menu a span{ 
display:block;/*设置为块状元素*/ 
position:absolute;/*使用绝对定位*/ 
width:0px;/*宽度为0*/ 
height:0px;/*高度为0*/ 
border:solid 8px #fff;/*设置默认边框样式*/ 
top:4px;/*竖直方向的定位*/ 
overflow:hidden; 
} 
.menu a span.left{ 
border-left-color:#c00; 
left:8px; 
} 
.menu a span.right{ 
border-right-color:#c00; 
right:8px; 
} 
</style> 
</head> 

<body> 
<div class="menu"> 
    <a href="#"> 
      <span class="left"></span> 
      首页 
      <span class="right"></span> 
    </a> 
        <a href="#"> 
          <span class="left"></span> 
          新闻 
          <span class="right"></span>          </a> 
        <a href="#"> 
          <span class="left"></span> 
          产品   
          <span class="right"></span>  
          </a> 
</div> 
</body> 
</html>