纯CSS+DIV实现的竖向菜单

最新推荐文章于 2018-06-10 11:16:51 发布

iteye_9193

最新推荐文章于 2018-06-10 11:16:51 发布

阅读量793

点赞数

分类专栏： javascript特效文章标签： CSS XHTML HTML

javascript特效专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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>