css表单列表框

html-css019

css表单列表框,第1张

list-styleCSS1IE4+ , NS4+有复合属性。设置列表项目相关内容list-style-imageCSS1IE4+ , NS6+有设置或检索作为对象的列表项标记的图像list-style-positionCSS1IE4+ , NS6+有设置或检索作为对象的列表项标记如何根据文本排列list-style-typeCSS1/CSS2IE4+ , NS4+有设置或检索对象的列表项所使用的预设标记marker-offsetCSS2NONE无设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

<style>

* { margin:0border:0padding:0list-style:nonelist-style-type:none}

.nav { width:1000pxfloat:left}

.nav li { float:leftwidth:99pxmargin-right:1pxdisplay:inline}

.nav li span { display:blockwidth:99pxheight:30pxline-height:30pxtext-align:centerbackground:#C03cursor:pointer}

.nav li p { top:30pxleft:0width:99pxheight:autodisplay:none}

.nav li p a { display:blockwidth:99pxheight:28pxline-height:28pxtext-align:centermargin-top:1pxbackground:#F03color:#fff}

.nav li:hove span { background:#30F}

.nav li:hover p { display:block}

.nav li p a:hover { background:#36F}

.bga { float:leftbackground:#336width:100%height:100pxcolor:#fff}

</style>

</head>

<body>

<ul class="nav">

<li><a href="#"><span>频道1</span></a>

<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>

</li>

<li><a href="#"><span>频道2</span></a></li>

</ul>

<div class="bga">111</div>

</body>

</html>

上面是用li:hover实现的，下面用JS实际，在网上找了一个JQ的。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

<style>

* { margin:0border:0padding:0list-style:nonelist-style-type:none}

.nav { width:1000pxfloat:left}

.nav li { float:leftwidth:99pxmargin-right:1pxdisplay:inline}

.nav li span { display:blockwidth:99pxheight:30pxline-height:30pxtext-align:centerbackground:#C03cursor:pointer}

.nav li p { top:30pxleft:0width:99pxheight:autodisplay:none}

.nav li p a { display:blockwidth:99pxheight:28pxline-height:28pxtext-align:centermargin-top:1pxbackground:#F03color:#fff}

.nav li.on span { background:#30F}

.nav li.on p { display:block}

.nav li p a:hover { background:#36F}

.bga { float:leftbackground:#336width:100%height:100pxcolor:#fff}

</style>

<script type="text/javascript" src="http://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>

</head>

<body>

<ul class="nav">

<li><a href="#"><span>频道1</span></a>

<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>

</li>

<li><a href="#"><span>频道2</span></a></li>

</ul>

<div class="bga">111</div>

<script type="text/javascript">

$('.nav li').each(function(){

$(this).hover(function(){

$(this).addClass('on').siblings().removeClass('on')

})

})

</script>

</body>

</html>