html导航栏下拉菜单代码？html顶部导航菜单栏代码

编程之家2026-06-18985次浏览

这篇文章给大家聊聊关于html导航栏下拉菜单代码，以及html顶部导航菜单栏代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

如何用HTML编程实现下拉菜单

下拉菜单，其实就是使用HTML+css和一些小小的js就能很简单的实现，

首先需要你有至少有2个div然后在将第一个div作为父级元素，然后在使用position:absolut;绝对定位一下；

然后在使用JS，获取对象，然后添加一个鼠标的onmouseover事件就行了

在这里给你看下我以前的写的一个代码

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

<head>

<title>简洁实用的二级下拉导航菜单</title>

body,html{padding:0;margin:0;text-align:center;font:normal 14px'arial';}

#mainNavBar{width:100%;background:#999;padding:10px 0;}

#nav{width:760px;height:30px;margin:0 auto;}

#nav ul{padding:0;margin:0;}

#nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;}

#nav ul li a{display:block;color:#fff;text-decoration:none;}

#nav ul li a:hover{font-weight:bold;background:#666;}

#subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;}

#subNav a{text-decoration:none;font-weight:normal;display:block;}

#subNav a:hover{color:#f00;background:#f00;}

</style>

</head>

<body>

<ul>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

var nav=document.getElementById("nav").getElementsByTagName("li");

for(i=0;i<nav.length;i++){

nav[i].onmouseover=function(){

this.style.fontWeight="bold";

this.style.overflow="visible";

this.style.background="#666666";

}

nav[i].onmouseout=function(){

this.style.fontWeight="normal";

this.style.background="#999999"

this.style.overflow="hidden";

}

</script>

</body>

</html>

#header#shousuo{

width:950px;

height:50px;

background:#f4f4f4;

margin-top:10px;

}

#shousuo ul li{

line-height:50px;

list-style-type:none;

float:left;

margin-left:5px;

font-weight:bold;

font-size:14px;

}

下拉导航栏怎么做

原来下拉菜单设置的样式是display:none；当一级菜单hover时，下拉菜单从display：none转变为display：block。

在设置当一级菜单：a标签被hover时，下拉菜单的样式，我的写法是：.nav>ul>a:hover+.pull1{display:block;}。

但是这样设置只能在a标签被hover时才能出现下拉菜单，当鼠标离开a标签时，下拉菜单就会消失。这样不符合下拉菜单的要求。所以我又设置了当下拉菜单被hover时，下拉菜单也会从display：none转变为display：block。

步骤/方法

1/4

只要浏览网页，都会接触过下拉导航菜单，可以说下拉导航菜单是计算机一切应用、程序、软件最为基本的构件。可想而知下拉导航菜单在程序、网页中的重要性。在下拉导航菜单无所不在的大环境下，如何提高访客在网页的停留时间与访问深度呢？在提高网页内容的前提下，完善美观、实用的下拉导航菜单的会是个有效的因素！

2/4

如何才能制作出用户体验度高的下拉菜单呢！硕思闪客菜单是操作简单、专业的下拉导航菜单制作工具，可以在界面中选取模板制作或是直接制作，下面操作一下如何在界面中直接制作下拉菜单。

1.在界面中的文件菜单下选择新建菜单的样式。如：水平样式。在窗口的预览区会显示一个菜单项，只要根据此菜单项展开进行新建多个菜单项、子菜单及多级子菜。

2.新建的菜单项可以通过右侧的任务栏对其进行设置，可以对菜单项的文字、链接位置、字体、背景、位置、边框、图标、样式等设置。

3/4

完全可按照自己构想的效果去设置，还可以对下拉导航菜单的全局进行设置，包括菜单的大小、菜单的类型、菜单的位置等。也可以对子菜单项设置是否滚动，按照什么方式滚动等。

4/4

菜单项制作完成、链接页面设置完成后，就可将制作好的下拉导航菜单发布到网页中。在发布的对话框中选择要插入下拉导航菜单的网页，代码必须要插入到页面的<body>标签内，在代码中找到<body>标签的位置，点击‘插入代码’按钮，就可成功发布，浏览网页时，就能看到下拉导航菜单。

点击要做下拉菜单的第一个单元格，在上方工具栏中找到“数据”，此类目下找到“数据验证”

2在“设置"中选择序列，点击”确定“，来源框就会自动闪亮；

3在来源框输入下拉菜单的名称，每个名称之间用英文中的逗号隔开；

4点击所选单元格的倒三角形，会出现下拉菜单，这样就可以了。

html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单

html做鼠标悬浮菜单上的选项能出现下拉菜单，CSS+JS做出此效果。

<body>内代码为：

<ULid=fm>

<LI><Arel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">一级菜单栏目</A>

<UL>

</LI>

<UL>

</UL></LI>

<UL>

</UL></LI></UL>为了突出效果，做的CSS样式代码为：

<STYLEtype=text/css>

*{margin:0;padding:0;border:0;}

#fm{line-height:24px;list-style-type:none;background:#666;}/*设置盒子的行高，去掉标记，设置背景颜色*/

#fma{display:block;width:80px;text-align:center;}/*设置A标签为块元素不显示，宽度，居中*/

#fma:link{color:#666;text-decoration:none;}/*设置未访问的链接样式*/

#fma:visited{color:#666;text-decoration:none;}/*设置已访问的链接样式*/

#fma:hover{color:#FFF;text-decoration:none;font-weight:bold;}/*当有鼠标悬停在链接上的颜色*/

#fmli{float:left;width:150px;background:#CCC;}

#fmlia:hover{background:#999;}

#fmliul{line-height:27px;list-style-type:none;text-align:left;left:-999em;width:80px;position:absolute;}

#fmliulli{float:left;width:80px;background:#F6F6F6;}

#fmliula{display:block;width:80px;width:80px;text-align:left;padding-left:5px;}

#fmliula:link{color:#666;text-decoration:none;}

#fmliula:visited{color:#666;text-decoration:none;}

#fmliula:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}

#fmli:hoverul{left:auto;}

#fmli.sfhoverul{left:auto;}

#content{clear:left;}

</STYLE>js代码为：

<SCRIPTtype=text/javascript>

functionmenuFix(){

varsfEls=document.getElementById("fm").getElementsByTagName("li");

for(vari=0;i<sfEls.length;i++){

sfEls[i].onmouseover=function(){

this.className+=(this.className.length>0?"":"")+"sfhover";

}

sfEls[i].onMouseDown=function(){

this.className+=(this.className.length>0?"":"")+"sfhover";

}

sfEls[i].onMouseUp=function(){

this.className+=(this.className.length>0?"":"")+"sfhover";

}

sfEls[i].onmouseout=function(){

this.className=this.className.replace(newRegExp("(?|^)sfhover\\b"),

"");

}

window.onload=menuFix;

</SCRIPT>最后的效果图为：

以上就是用html做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。

关于html导航栏下拉菜单代码和html顶部导航菜单栏代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。

adobe ai软件(再说一次,Adobe Illustrator不是AI)css border属性的使用方法 css中border属性