当前位置:编程学习 > JS >>

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淡入淡出的选项卡菜单

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,