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>竖向菜单</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>
上一个:仿新浪微博首页“大家正在说”渐入轮显效果
下一个:jQuery TAB淡入淡出的选项卡菜单