css的下拉框怎么实现(html下拉框的css代码)
如何用css做下拉菜单
纯CSS的下拉菜单，此处理解的意思就是li标签套li标签，然后再给li标签设置样式。在被套的li标签设置平时状态为隐藏，再等鼠标移动到上一个li标签时，将被套的li标签显示（样式：overflow:hidden; ）。
贴一段网上摘的纯CSS下拉菜单（二级）
!DOCTYPE HTML
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title利用float制作兼容ie6纯css下来菜单/title
style type="text/css"
* { margin:0; padding:0; }
ul { list-style:none; }
a:hover {color:#555; }
.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }
.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }
.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }
.nav a:hover { margin-right:1px; background:#3cf; }
.nav dd ul { float:left; font-size:0; z-index:888; }
.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }
.nav dd li a:hover { margin-right:1px; }
/style
/head
body
dl class="nav"
dda href=""首页/a/dd
dd
a href=""关于我们/a
ul
lia href=""公司简介/a/li
lia href=""公司文化/a/li
lia href=""企业荣誉/a/li
lia href=""联系我们/a/li
/ul
/dd
dd
a href=""新闻动态/a
ul
lia href=""国内新闻/a/li
lia href=""国外新闻/a/li
/ul
/dd
dd
a href=""产品展示/a
ul
lia href=""111/a/li
lia href=""222/a/li
/ul
/dd
/dl
/body
/html
CSS技巧分享：如何用css制作横排二级下拉菜单
工具/材料
notepad++
浏览器
打开Notepad++，先输入个页面框架
！DOCTYPE html
html xmlns=""
hade
/hade
body
/body
框架好了，那么就该定义页面的title，关键词keyword，和描述description
meta charset="UTF-8" content="text/html" http-equiv="content-type"
title纯css二级导航下拉菜单/title
meta name="keyword" content="搜狗略懂"
meta name="description" content="描述"
这些内容只能在head/head中完成。
定义页面使用的css样式，也是需要在head里定义的。
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
--
/style
添加一个DIV标签，在页面中划分出一个块来，用来显示。
div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述
然后使用无序标签ul+样式li 来实现模块。
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗问问/a/li
lia href="#"搜狗输入法/a/li
lia href="#"搜狗浏览器/a/li
lia href="#"搜狐/a/li
/ul
/div
放上全部的代码吧，可以参考一下啊，
!DOCTYPE html
html xmlns=""//允许你通过一个网址来识别你的标记
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="keyword" content="利用css实现下拉菜单"
meta name="description" content="搜狗略懂、css分享"
titlecss实现下拉导航栏菜单/title
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
--
/style
/head
body
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗问问/a/li
lia href="#"搜狗输入法/a/li
lia href="#"搜狗浏览器/a/li
lia href="#"搜狐/a/li
/ul
/li
/ul
/div
/body
/html
如果要添加更多的菜单，只需要后边继续添加ul/li即可
特别提示
写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？
css怎么做下拉菜单
我大概的给你写一下 也算是提供个思路吧
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的事件也行 隐藏变成不隐藏 透明变成不透明 还可以加一些动画 翻转效果 让下拉框出现的更惊艳。
怎样使用css制作下拉菜单
菜单是a， 下拉菜单的容器是div class="drop-down".../div
然后利用a:focus + .dropdown{ ... } 来实现。
要点1：CSS如何实现影响其他元素？
要点2： 如何做出（伪）点击触发？
基本用 a：focus，个人感觉自然一点。当然如果失去焦点，下拉菜单容器也会相应地隐藏。
# HTML BODY 部分代码：
body
? ? a href="#"Menu/a
?div class="drop-down" id="drop-down"
? ul
liOption 1/li
? ? ? ? ? ? ? ? ? ? ? ?liOption 2/li
liOption 3/li
liOption 4/li
? /ul
?/div
/body
#HTML CSS 部分代码：
html, body{
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
}
a{
display: block;
width:50px;
border:1px solid #333;
background-color:white;
padding:3px;
text-align: center;
text-decoration: none;
}
a:hover{ ?background-color:#EEE; }
a:focus + .drop-down{ ?display: inline-block; }
.drop-down{
display: none;
}
ul{
border:1px solid #333;
display: inline-block;
margin-top:1px;
padding:0px;
}
ulli{
height: auto;
padding: 3px 10px;
border-bottom: 1px solid #333;
text-align: center;
vertical-align: middle;
}
ulli:last-child{
border:0px solid transparent;
}
ulli:hover{
background-color:#DDD;
}
-----------------------------------------------------------------------
最后实现效果：
如何使用HTML和CSS制作下拉菜单
使用HTML和CSS制作下拉菜单的方法如下：
1、编写带有div导航的html代码：
2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。
3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。
4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。
5、制作导航css：