html下拉菜单代码？html编辑器

编程之家2026-05-18942次浏览

大家好，关于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;

}

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和CSS制作下拉菜单

使用HTML和CSS制作下拉菜单的方法如下：

1、编写带有div导航的html代码：

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

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

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

5、制作导航css：

关于本次html下拉菜单代码和html编辑器的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。

java replace函数(Java字符串比较函数)xml编辑器(安卓XML编辑器)