正文

css横向菜单样式,横向菜单的特征

IP云
IP云V管理员/5 阅读
12/06
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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即可

特别提示

写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？

相关问答

Q1: 如何用CSS制作横向菜单

如果是导航菜单可以使用ul无需列表来制作

同时使用CSS中的float：left来控制li靠左浮动即可实现横向菜单

注意UL或UL的父级容器宽度必须大于所有li宽度的和

例如

style

ul {

padding:0;

margin:0;

list-style:none;

width:600px;

height:50px;

line-height:50px;

text-align:center;

}

ul li {

width:100px;

height:50px;

float:left;

}

style

ul

li菜单项目1/li

li菜单项目2/li

li菜单项目3/li

li菜单项目4/li

li菜单项目5/li

li菜单项目6/li

ul

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

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

Q3: 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