正文
css下拉菜单样式,css下拉列表样式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用css制作横排二级下拉菜单
css制作横排二级下拉菜单，代码如下：
body
ul id="FM"
lia href="#"一级栏目/a
ul
lia href="#"二级菜单/a/li
lia href="#"二级菜单/a/li
lia href="#"二级菜单/a/li
/ul
/li
lia href="#"一级栏目/a
ul
lia href="#"二级菜单/a/li
lia href="#"二级菜单/a/li
lia href="#"二级菜单/a/li
/ul
/li
lia href="#"一级栏目/a
ul
lia href="#"二级菜单/a/li
lia href="#"二级菜单/a/li
lia href="#"二级菜单/a/li
/ul
/li
/ul
/body
CSS样式设置代码，如下；
style type="text/css"
ul#FM li {
float:left;
width:160px;
list-style:none;
}
ul#FM li ul {
display:none;
margin:0;
padding:0;
}
ul#FM li:hover ul{
display:block;
}
ul#FM li a{
display:block;
border:1px solid red;
text-decoration:none;
color:#000;
}
ul#FM li li a {
display:block;
font-size:12px;
border:1px solid green;
padding:3px;
text-decoration:none;
width:152px;
color:#CC3399;
}
ul#FMli li a {
width:auto;
}
/style
所做出来的效果，鼠标放上去时，如图；
相关问答
Q1: css导航栏鼠标hover的时候就出现下拉菜单是怎么做的？
程序输入如下：
div id="menu"
br/
ul
li../li
li../li
li../li
/ul
/div
#menu{
overflow:hidden;
height:20px;}
#menu:hover {
height:100px;}
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover{
background-color:yellow;}
对于HTML 部分：
可以使用任何的 HTML 元素来打开下拉菜单，如：span, 或 a button 元素。使用容器元素 (如： div) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 div 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
对于CSS 部分：
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
Q2: 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即可
特别提示
写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？
Q3: 如何用css做下拉菜单
纯CSS的下拉菜单，此处理解的意思就是
标签套
标签，然后再给
标签设置样式。在被套的
标签设置平时状态为隐藏，再等鼠标移动到上一个
标签时，将被套的
标签显示（样式：overflow:hidden;
）。
贴一段网上摘的纯CSS下拉菜单（二级）
利用float制作兼容ie6纯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;
}
.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;
}
首页
关于我们
公司简介
公司文化
企业荣誉
联系我们
新闻动态
国内新闻
国外新闻
产品展示
111
222
Q4: 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的事件也行 隐藏变成不隐藏 透明变成不透明 还可以加一些动画 翻转效果 让下拉框出现的更惊艳。
Q5: Css下拉菜单怎么做？
原理hover，二级先设置样式是display:none;，当一级的元素处于:hover鼠标移上的时候，二级的元素就display:block;，二级就会显示出来了。
li一级
ul
li二级1/li
li二级2/li
li二级3/li
/ul
/li
css
li{padding:0;margin:0;list-style:none;}
li ul{display:none;}
li:hover ul{display:block;}
大概是这样，更齐全的代码，你问度娘要：CSS下拉菜单，可以找到纯CSS的或者JS,JQ的，
