css的表单怎么插入多个下拉选项的

html-css019

css的表单怎么插入多个下拉选项的,第1张

<!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>

纯CSS的下拉菜单，此处理解的意思就是<li>标签套<li>标签，然后再给<li>标签设置样式。在被套的<li>标签设置平时状态为隐藏，再等鼠标移动到上一个<li>标签时，将被套的<li>标签显示（样式：overflow:hidden）。

贴一段网上摘的纯CSS下拉菜单（二级）

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>利用float制作兼容ie6纯css下来菜单</title>

<style type="text/css">

* { margin:0padding:0}

ul { list-style:none}

a:hover {color:#555}

.nav { float:leftoverflow:hiddentext-align:centerfont-size:14px}

.nav dd { float:leftwidth:300pxmargin:-888px -150px 0 0}

.nav dd a { float:leftmargin-top:888pxdisplay:blockposition:relativebackground:#eeewidth:150pxheight:30pxline-height:30pxborder-bottom:1px solid #fff}

.nav a:hover { margin-right:1pxbackground:#3cf}

.nav dd ul { float:leftfont-size:0z-index:888}

.nav dd li a { clear:leftwidth:150pxmargin-top:0font-size:14px}

.nav dd li a:hover { margin-right:1px}

</style>

</head>

<body>

<dl class="nav">

<dd><a href="">首页</a></dd>

<dd>

<a href="">关于我们</a>

<ul>

<li><a href="">公司简介</a></li>

<li><a href="">公司文化</a></li>

<li><a href="">企业荣誉</a></li>

<li><a href="">联系我们</a></li>

</ul>

</dd>

<dd>

<a href="">新闻动态</a>

<ul>

<li><a href="">国内新闻</a></li>

<li><a href="">国外新闻</a></li>

</ul>

</dd>

<dd>

<a href="">产品展示</a>

<ul>

<li><a href="">111</a></li>

<li><a href="">222</a></li>

</ul>

</dd>

</dl>

</body>

</html>

我大概的给你写一下 也算是提供个思路吧

html页面中有一个可弹出下拉框的div D1 和下拉框本体div D2

<div class="D1">

鼠标移动到我身上出现下拉框

<div class="D2">

我是下拉框

</div>

<div/>

接下来是CSS

.D1{

width:100px

height:50px

background-color:green

position:relative

}

.D2{

height:300px

width:100px

background-color:aqua

position:absolute；

top:50px

left:0px

display:none

}

.D1:hover .D2{

display:inline-block

}

思路其实就是下拉框一开始是隐藏的 你可以通过hover也行或者js的事件也行 隐藏变成不隐藏 透明变成不透明 还可以加一些动画 翻转效果 让下拉框出现的更惊艳。