css二级菜单样式,css3二级菜单特效

css小问题：为什么二级菜单样式没显示？

你的html结构不对，一级菜单的结束li标签放错位置了

和硕网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联从2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

!--建立HTML框架--

div id="navigation"

ul id="listUL"

lia href="#"Home/a/li

lia href="#"News/a

ul class="myHide"

lia href="#"Lastest News/a/li

lia href="#"All News/a/li

/ul

/li

lia href="#"Sports/a

ul

lia href="#"Basketball/a/li

lia href="#"Football/a/li

lia href="#"Volleyball/a/li

/ul

 /li

lia href="#"Weather/a

ul

lia href="#"Today's Weather/a/li

lia href="#"Forecast/a/li

/ul

 /li

lia href="#"Contact Me/a/li

/ul

/div

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编写的简单的二级菜单怎么横向排列？

这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

HTML

HEAD

TITLE menu /TITLE

/HEAD

style

body{

padding-top:200px;

text-align:center;

font-size:13px;

}

#content{

margin:0 auto;

text-align:left;

width:720px;

background:orange;

background-color:black;

}

ul{

margin-top:1px;

list-style:none;

}

#father li{

float:left;

position:relative;

margin-right:10px;

width:120px;

text-align:center;

border:1px solid black;

border-bottom:none;

}

#father li a:link,#father li a:visited{

line-height:30px;

color:darkred;

font-weight:bold;

}

#father li ul *{

float:none;

margin-right:0px;

padding:0;

color:none;

width:90px;

background-color:orange;

border:none;

}

.child{

position:absolute ;

top:29px;

right:0px;

display:none;

}

#father li ul li a:link,#father li ul li a:visited{

margin:1px;

color:blue;

text-decoration:none;

font-weight:normal;

line-height:20px;

}

#father li ul li a:hover{

background-color:white;

}

/style

script

function showMenu(emt,id1,id2){

document.getElementById(id1).style.textDecoration = "none";

document.getElementById(id1).style.color = "white";

document.getElementById(id2).style.display = "block";

emt.style.backgroundColor = "orange";

emt.style.borderColor = "white";

}

function hiddenMenu(emt,id1,id2){

document.getElementById(id1).style.textDecoration = "underline";

document.getElementById(id1).style.color = "darkred";

document.getElementById(id2).style.display = "none";

emt.style.backgroundColor = "black";

emt.style.borderColor = "black";

}

/script

BODY

/table

div id="content"

ul id="father"

li onmouseover="showMenu(this,'a1','ul1')" onmouseout="hiddenMenu(this,'a1','ul1')"

a id="a1" href="#"主页/a

ul id="ul1" class="child"

lia href="#"文字测试/a/li

lia href="#"使用中文字符/a/li

lia href="#"你看可以吗/a/li

lia href="#"Item 4/a/li

lia href="#"Item 5/a/li

lia href="#"Item 6/a/li

lia href="#"Item 7/a/li

/ul

/li

li onmouseover="showMenu(this,'a2','ul2')" onmouseout="hiddenMenu(this,'a2','ul2')"

a id="a2" href="#"程序设计/a

ul id="ul2" class="child"

lia href="#"JAVA/a/li

lia href="#"C/C++/a/li

lia href="#"C#.NET/a/li

lia href="#"游戏开发/a/li

lia href="#"汇编/a/li

/ul

/li

li onmouseover="showMenu(this,'a3','ul3')" onmouseout="hiddenMenu(this,'a3','ul3')"

a id="a3" href="#"网页技术/a

ul id="ul3" class="child"

lia href="#"HTML/a/li

lia href="#"CSS/a/li

lia href="#"JavaScript/a/li

lia href="#"XML/a/li

lia href="#"ASP/a/li

lia href="#"JSP/a/li

lia href="#"PHP/a/li

lia href="#"Perl/a/li

/ul

/li

li onmouseover="showMenu(this,'a4','ul4')" onmouseout="hiddenMenu(this,'a4','ul4')"

a id="a4" href="#"动态网页/a

ul id="ul4" class="child"

lia href="#"ASP/a/li

lia href="#"JSP/a/li

lia href="#"PHP/a/li

lia href="#"Perl/a/li

/ul

/li

li onmouseover="showMenu(this,'a5','ul5')" onmouseout="hiddenMenu(this,'a5','ul5')"

a id="a5" href="#"关于我/a

ul id="ul5" class="child"

lia href="#"Item 1/a/li

lia href="#"Item 2/a/li

lia href="#"Item 3/a/li

lia href="#"Item 4/a/li

lia href="#"Item 5/a/li

/ul

/li

/ul

div

/BODY

/HTML

用css如何实现二级菜单的显示

最简单的就是利用CSS层级关系进行编写

比如：

ul class="main_menu"

li

span主菜单/span

/li

li

span主菜单二/span

ul class="sub_menu"

li三级菜单/li

li三级菜单二/li

/ul

/li

/ul

CSS部分可以这样写：

style

ul.sub_menu {display:none;}   // 先让二给菜单隐藏

ul.main_menuli:hover ul.sub_menu {display:block;}  //当鼠标划过第一级主菜单的li标签时，当前子级的二级ul就显示出来。

//其它的你自己再美化，主要告诉你方式

/style

如何用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

所做出来的效果，鼠标放上去时，如图；


标题名称：css二级菜单样式,css3二级菜单特效
文章地址：http://cdiso.cn/article/dsdcceh.html

其他资讯

联系小谭

企业微信号
友情链接： 德阳做网站   添翼二手车鉴定   成都力比特   网站营销   网站推广   成都租用服务器   高端网站设计   成都微信开发   巴彦网站建设   上海除甲醛   

123ABC 成都网站建设，成都定制网站建设——全心全意建网站公司