两边带箭头指示的CSS竖向列表菜单_菜单导航特效

一个完全用CSS代码实现的竖向导航菜单，两边带箭头指示，直观、简洁、实用。当鼠标滑过期，菜单项会出现一个方框，这里可以设定背景颜色，改成你自己喜欢的吧。

<!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>
<title>两边带箭头指示的竖向菜单 - Codes by mb5u.com</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<style>
.box {
  position:relative;
  }
#menu {
  width:100px; 
  text-align:center; 
  position:relative;
  }
#menu a, #menu a:visited {
  text-decoration:none; 
  color:#c00; 
  display:block; 
  width:88px; 
  height:16px; 
  border:1px solid #fff; 
  padding:5px;
  }
* html #menu a, 
* html #menu a:visited {
  width:100px; 
  height:28px; 
  w\idth:88px; 
  he\ight:16px;
  }
#menu a span {
  display:none;
  }
#menu a:hover {
  border:1px solid #c00; 
  }
#menu a:hover span.left, 
#menu a:hover span.right {
  display:block; 
  position:absolute; 
  height:0; 
  width:0; 
  overflow:hidden; 
  border-top:8px solid #fff; 
  border-bottom:8px solid #fff; 
  }
#menu a:hover span.left {
  left:5px; 
  top:5px; 
  border-left:8px solid #c00;
  }
#menu a:hover span.right {
  left:87px; 
  top:5px; 
  border-right:8px solid #c00;
  }

* html #menu a:hover span.left, 
* html #menu a:hover span.right {
  width:8px; 
  height:16px; 
  w\idth:0; 
  he\ight:0;
  }
</style>
</head>
<body>
<div id="menu">
  <div class="box">
    <a href="http://mb5u.com">源码首页
      <span class="left"></span>
      <span class="right"></span>
    </a>
  </div>
  <div class="box">
    <a href="http://mb5u.com">最新更新
      <span class="left"></span>
      <span class="right"></span>
    </a>
  </div>
  <div class="box">
    <a href="http://mb5u.com">下载排行
      <span class="left"></span>
      <span class="right"></span>
    </a>
  </div>
  <div class="box">
    <a href="http://mb5u.com">分类导航
      <span class="left"></span>
      <span class="right"></span>
    </a>
  </div>
  <div class="box">
    <a href="http://mb5u.com/jscss/">网页殊效
      <span class="left"></span>
      <span class="right"></span>
    </a>
  </div>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

两边带箭头指示的CSS竖向列表菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些