檬味博客 » 问答 » css编写的简单的二级菜单怎么横向排列？

css编写的简单的二级菜单怎么横向排列？

这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。 menu body{ padding-top:200px;text-align:center;font-size:13px;} content{ margin:0 auto;text-align...
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">
<li><a href="#">文字测试</a></li>
<li><a href="#">使用中文字符</a></li>
<li><a href="#">你看可以吗</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a 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">
<li><a href="#">JAVA</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">C#.NET</a></li>
<li><a href="#">游戏开发</a></li>
<li><a 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">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a 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">
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a 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">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
<div>
</BODY>
</HTML>2011-08-17
首页打开dreamweaver或其它编辑器，创建一个名为nav的导航菜单
<div class="nav">
<ul>
<li><a href="#">栏目一</a></li>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>

现在为nav添加样式,首先去掉默认的margin和padding，再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：

<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav
ul li a
{ width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px
solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
</style>

像这样，一个菜单横向菜单就建好了，下面给栏目一，栏目二，栏目三，添加二级下拉菜单
<div class="nav">
<ul>
<li><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>
</li>
<li><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>
</li>
<li><a href="#">栏目三</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>

添加完二级栏目后，现在开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签，如一下样式：
.nav ul li ul { position:absolute;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}

接下来隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }

至此，横向二级下拉菜单就制作完成了，这里附加上全部代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横排二级下拉菜单</title>
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav
ul li a
{ width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px
solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
</style>
</head>
<body>
<div class="nav">
<ul>
<li><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>
</li>
<li><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>
</li>
<li><a href="#">栏目三</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
</body>
</html>2015-09-23
第二个ul加上position:absolute; 第二个ul里的li加上float:left2011-08-17
mengvlog 阅读 13 次 更新于 2025-06-21 02:40:59 我来答关注问题0
3 个回答檬味博客专题活动
  • 云易网络科技 下拉菜单代码怎么写用CSS实现下拉菜单

    1) 当鼠标移入first 时，弹出二级菜单。2) 当鼠标移出 first 时，遣散二级菜单。2、知识点：1) 弹性布局 flex-box 2) 相对定位中绝对定位 position:absolute;position:relative;3) 变形中的放大 transform:scale();4) 动画中的过渡属性 transition:;二、代码编写 1、创建空白页，建立HTML基础结构。

  • 文暄生活科普 CSS DIV可以写出第二级子菜单也是横向的横向导航菜单?

    使用纯CSS创建一个横向导航菜单，包含第二级子菜单。为了实现这个目标，我们使用了CSS选择器、属性和伪类。首先定义了所有元素的基本样式，使用了内边距和外边距的清除（margin:0; padding:0;）。接下来，我们定义了`.menu`类的样式，设置了宽度为300px，并将列表样式设置为无（list-style:none;）。然...

  • 瑞物评测室 CSS技巧分享:如何用css制作横排二级下拉菜单

    框架好了，那么就该定义页面的title，关键词keyword，和描述description meta charset="UTF-8" content="text/html" http-equiv="content-type" title纯css二级导航下拉菜单/title meta name="keyword" content="搜狗略懂" meta name="descrip...

  • 文暄生活科普 二级导航、导航栏3D立体菜单案例,前端学习,CSS制作二级菜单栏

    要实现二级菜单，关键在于利用 `:hover` 伪类。当鼠标悬停在一级菜单项上时，背景色变为特定颜色（如aqua）。同时，我们通过设置 `display:none` 来隐藏默认的二级菜单列表。当用户鼠标悬停在一级菜单项上时，二级菜单列表会被激活，背景色变为另一个颜色（如cadetblue），从而实现二级菜单的显示效果。...

  • fantasy_wl 如何利用纯CSS制作二级或多级导航菜单

    一级菜单_01 二级菜单_01 二级菜单_02

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部