html分级菜单怎么写 html三级菜单栏

很多站长朋友们都不太清楚html分级菜单怎么写，今天小编就来给大家整理html分级菜单怎么写，希望对各位有所帮助，具体内容如下：

本文目录一览： 1、求教html li 二级菜单如何写？ 2、 html下拉菜单怎么写 3、 html页面怎么实现二级下拉菜单 4、 HTML 二级导航菜单 5、这样类似的二级菜单用CSS和html怎么实现? 6、 html二级菜单怎么做求教html li 二级菜单如何写？

假如想给home建一个二级菜单

<ul>

<li>aaaaaaa</li>

<li>bbbbbbbb</li>

</ul>

</li>

<li><a href="page-template.html"><span>About Us</span></a></li>

<li><a href="portfolio-listing.html"><span>Portfolio</span></a> </li>

这个下面添加二级菜单。

<li><a href="contact.html"><span>Contact Us</span></a></li>

</ul>

html下拉菜单怎么写

方法如下：

方法一：

HTML

1、创建CSS菜单的HTML代码框架。我们使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。

2、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。

3、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。

4、在HTML代码中添加样式表链接。目前我们已经完成了HTML代码，其内容是一个清晰的菜单和子菜单的层次布局结构。我们使用外置的CSS样式表，因此需要在代码的‘head’区域添加样式表链接。

方法二：

CSS

1、创建CSS文件。完成HTML框架代码后，我们需要使用样式表来实现下列菜单功能。我们使用CSS选择器来定位HTML中的菜单项，因此无需在HTML中添加额外的ID或class属性。

我们通过UL内嵌UL的方式来定位子菜单，并使用display:none;属性将其隐藏。

在鼠标悬停在LI元素上时，我们需要将其转换为block模式，重新显示相应的子菜单，而>命令可以定位鼠标悬停位置的LI元素。

2、使用CSS样式表显示主菜单。

position:relative;声明让子菜单根据主菜单相对位置显示。

display:inline-block;声明可以将菜单调整到合适宽度。

3、设置鼠标悬停时的字体渐变颜色。图示中的代码在悬停时，将链接变为深色渐变背景和白色文字的字体。

4、使用样式表显示子菜单。当前子菜单样式继承主菜单元素。我们要让子菜单项垂直显示在主菜单项下方。

5、定位下拉菜单，并将菜单项对齐。这将会同时去除灰色背景。

position:relative;声明必须添加到列表项顶端。

position:absolute;声明必须添加到相对位置定位的列表中。

下拉菜单

在计算机应用中，下拉式选单是选单的一种表现形式。具体表现为：当用户选中一个选项后，该选单会向下延伸出具有其他选项的另一个选单。下拉式选单通常应用于把一些具有相同分类的功能放在同一个下拉式选单中，并把这个下拉式选单置于主选单的一个选项下。下拉菜单内的项目可以据需要设置为多选或单选，可以用来替代一组复选框（设置为多选）或单选框（设置为单选）。这样比复选框组或单选框组的占用位置小，但不如它们直观。

html页面怎么实现二级下拉菜单

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

* { 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>

打开页面预览效果

HTML 二级导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title>

/* common styling */

/* set up the overall width of the menu div, the font and the margins */

.menu {

font-family: arial, sans-serif;

width:750px;

margin:0;

margin:50px 0;

}

/* remove the bullets and set the margin and padding to zero for the unordered list */

.menu ul {

padding:0;

margin:0;

list-style-type: none;

}

/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */

.menu ul li {

float:left;

position:relative;

}

/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */

.menu ul li a, .menu ul li a:visited {

display:block;

text-align:center;

text-decoration:none;

width:104px;

height:30px;

color:#000;

border:1px solid #fff;

border-width:1px 1px 0 0;

background:#c9c9a7;

line-height:30px;

font-size:11px;

}

/* make the dropdown ul invisible */

.menu ul li ul {

display: none;

}

/* specific to non IE browsers */

/* set the background and foreground color of the main menu li on hover */

.menu ul li:hover a {

color:#fff;

background:#b3ab79;

}

/* make the sub menu ul visible and position it beneath the main menu list item */

.menu ul li:hover ul {

display:block;

position:absolute;

top:31px;

left:0;

width:105px;

}

/* style the background and foreground color of the submenu links */

.menu ul li:hover ul li a {

display:block;

background:#faeec7;

color:#000;

}

/* style the background and forground colors of the links on hover */

.menu ul li:hover ul li a:hover {

background:#dfc184;

color:#000;

}

</style>

<!--[if lte IE 6]>

/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */

/* Get rid of any default table style */

table {

border-collapse:collapse;

margin:0;

padding:0;

}

/* ignore the link used by 'other browsers' */

.menu ul li a.hide, .menu ul li a:visited.hide {

display:none;

}

/* set the background and foreground color of the main menu link on hover */

.menu ul li a:hover {

color:#fff;

background:#b3ab79;

}

/* make the sub menu ul visible and position it beneath the main menu list item */

.menu ul li a:hover ul {

display:block;

position:absolute;

top:32px;

left:0;

width:105px;

}

/* style the background and foreground color of the submenu links */

.menu ul li a:hover ul li a {

background:#faeec7;

color:#000;

}

/* style the background and forground colors of the links on hover */

.menu ul li a:hover ul li a:hover {

background:#dfc184;

color:#000;

}

</style>

<![endif]-->

</head>

<body>

<ul>

<li><a class="hide" href="menu/index.html">DEMOS</a>

<!--[if lte IE 6]>

<a href="menu/index.html">DEMOS

<![endif]-->

<ul>

<li><a href="menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>

<li><a href="menu/embed.html" title="Wrapping text around images">wrapping text</a></li>

<li><a href="menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a href="menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>

<li><a href="menu/old_master.html" title="Image Map for detailed information">image map</a></li>

<li><a href="menu/bodies.html" title="fun with background images">fun backgrounds</a></li>

<li><a href="menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>

<li><a href="menu/em_images.html" title="em size images compared">em sized images</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>

<a href="index.html">MENUS

<![endif]-->

<ul>

<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>

<a href="layouts/index.html">LAYOUTS

<![endif]-->

<ul>

<li><a href="layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>

<li><a href="layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>

<li><a href="layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>

<li><a href="layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>

<li><a href="layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="boxes/index.html">BOXES</a>

<!--[if lte IE 6]>

<a href="boxes/index.html">BOXES

<![endif]-->

<ul>

<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>

<a href="mozilla/index.html">MOZILLA

<![endif]-->

<ul>

<li><a href="mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>

<li><a href="mozilla/content.html" title="Using content:">content:</a></li>

<li><a href="mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>

<li><a href="mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>

<li><a href="mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>

<li><a href="mozilla/target.html" title="Target Practise">target practise</a></li>

<li><a href="mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>

<li><a href="mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>

<a href="ie/index.html">EXPLORER

<![endif]-->

<ul>

<li><a href="ie/exampleone.html" title="Example one">example one</a></li>

<li><a href="ie/weft.html" title="Weft fonts">weft fonts</a></li>

<li><a href="ie/exampletwo.html" title="Vertical align">vertical align</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>

<a href="opacity/index.html">OPACITY

<![endif]-->

<ul>

<li><a href="opacity/colours.html" title="colour wheel">opaque colours</a></li>

<li><a href="opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>

<li><a href="opacity/png.html" title="partial opacity">partial opacity</a></li>

<li><a href="opacity/png2.html" title="partial opacity II">partial opacity II</a></li>

</ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

</ul>

</div>

</body>

</html>

这样类似的二级菜单用CSS和html怎么实现?

这个说来话来，但只要你知道原理就很简单了，做得好不好看是样式的问题了。请看如下调用jquery的j显示子菜单的代码：

$("#menu_2").hover(function() {

$(".sub_menu_2").show();

function() {

/*这里就是out事件*/

$(".sub_menu_2").hide();

});

剩下的就是样式的问题了

html二级菜单怎么做

首页我们打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单

<ul>

</ul>

</div>

如下图所示：

* { 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>

打开页面预览效果

像这样，一个菜单横向菜单就建好了，下来我们给栏目一，栏目二，栏目三，添加二级下拉菜单

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</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" "">

<head>

<title>横排二级下拉菜单</title>

* { 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>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

关于html分级菜单怎么写的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。

查看更多关于html分级菜单怎么写 html三级菜单栏的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did122896

更新时间：2022-11-21 阅读：79次