两边带箭头指示的CSS竖向列表菜单

2024-09-05 12:19:34

字体：大中小

来源：转载

供稿：网友

一个完全用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>两边带箭头指示的竖向菜单</title><meta http-equiv="Content-Type" content="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">    源码首页      <span class="left"></span>      <span class="right"></span>      </div>  <div class="box">    最新更新      <span class="left"></span>      <span class="right"></span>      </div>  <div class="box">    下载排行      <span class="left"></span>      <span class="right"></span>      </div>  <div class="box">    分类导航      <span class="left"></span>      <span class="right"></span>      </div>  <div class="box">    网页特效      <span class="left"></span>      <span class="right"></span>      </div></div></body></html>

上一篇：另类个性竖向纯CSS导航栏

下一篇：黑蓝搭配的横向折角CSS菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注