css竖向菜单，带三角导航

2024-09-05 12:20:42

字体：大中小

来源：转载

供稿：网友

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><style>#list {margin:auto;	width:281px;	height:auto;	}.static {background-color:#6A91C3;	font: 16px/42px Tahoma, Geneva, sans-serif ;	color:#FFF;	padding-left:31px;	width:248px;	float:left;	height:auto;	background-image:url(/jscss/demoimg/201010/blue1.gif);	background-repeat:no-repeat;}.down {background-repeat:no-repeat;	background-color:#6A91C3;	font: 16px/42px Tahoma, Geneva, sans-serif ;	color:#FFF;	padding-left:31px;	width:248px;	float:left;	height:auto;	background-image:url(/jscss/demoimg/201010/down.gif);}.ul_style{display:none;padding-top:10px;}.ul_style li{float:left;	background:url(/jscss/demoimg/201010/spot.gif) no-repeat 0 0;	height:15px;	font: 14px/15px Tahoma, Geneva, sans-serif ;	width:201px;	padding:0px 0 0 15px;	}</style></head><body><div id="wrapper">  <ul id="list">    <li class="static">分类1 <br />    <ul class="ul_style">      <li>分类1</li>      <li>分类1</li>      <li>分类1</li>    </ul></li>    <li class="static">分类2 <br />    <ul class="ul_style">      <li>分类2</li>      <li>分类2</li>      <li>分类2</li>    </ul></li>    <li class="static">分类3 <br />    <ul class="ul_style">      <li>分类3</li>      <li>分类3</li>      <li>分类3</li>    </ul></li>    <li class="static">分类4 <br />    <ul class="ul_style">      <li>分类4</li>      <li>分类4</li>      <li>分类4</li>    </ul>    </li>  </ul></div></body></html>

上一篇：滑动菜单，滑动门，CSS代码

下一篇：仿雅虎首页快捷登录入口及导航模块的代码