首先看一下图示：
就像上面两张图中的悬浮提示信息，带有漂亮的箭头。
接下来我们分步骤的来讲解！
一、触发该浮动Tip的JS函数：showMenu()
static\js\common.js文件872行，就是这个函数的定义。这段函数你看不懂没关系，会使用就行了，下面我们来讲解如何使用。
二、showMenu()的使用方法：
上面降到的这个函数定义的JS文件，它在DZ的核心JS中，所以我们使用的时候不必重新载入文件，因为系统已经早帮你加载过了，所以直接使用就可以，但是前提条件是必须在DZ系统中，比如DZ的任何页面模版文件中，插件、单页的模版文件中等等（点击查看怎么制作Discuz!单页），超出DZ系统意外，就不能使用了。
首先，得明确，这个效果必须由两部分组成：
1、显示层（直接在模版中显示的内容，鼠标移动上去后触发该浮动层）；
2、隐藏悬浮层（这个默认是隐藏的，不显示的，只有鼠标放在显示层上，才会触发显示）。
所以，我们分别建立两个组成部分。
效果如下图：
当鼠标放在文字上时，悬浮层激活，显示出来。
需要注意的是：
上面讲的是函数的基础功能，下面我们开始细化讲解，将悬浮美化，带箭头。
三、带箭头的悬浮Tip
看上面图片效果，也许弹出层的位置和箭头的位置并不是我们理想的位置，可以调节 <div id="test_menu" class="tip tip_4" style="display: none">和 <div class="tip_horn"></div>这两个层的CSS样式，左边加入距离就可以微调，比如：
看上面图片，悬浮弹出的位置是不是向左微移了一点，这里的margin-left:-100px就是说向左移动100像素
同理，箭头要向右移动，如下： <div class="tip_horn" style="margin-left:110px"></div>
如上图，箭头已经右移了110个像素。
另外，如果要修改弹出浮动层的宽度，高度，也可以在那个区域加入CSS，定义宽度，高度值。
jsp中：<body>
<div style="position: absolutez-index:90" id="div1">我不动</div>
<div>我动<div>
</body>
//有的将position设置成fixed,我试了试效果不如position好,设置z-index，向里的深度，我这儿设置90，你要覆盖几个div，设置数大于那个数就行。
js中：
我这儿用jquery写。
$(document).ready(function(){
$(window).scroll(function(){//滚动时触发函数
$("#div1").css("top",$(document).scrollTop())//将滚动条高度赋给悬浮框。
})
})
导入jquery库，效果就出来了。
html做鼠标悬浮菜单上的选项能出现下拉菜单，CSS+JS做出此效果。
<body>内代码为：
<UL id=fm><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>
<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>
</UL></LI></UL>
为了突出效果，做的CSS样式代码为：
<STYLE type=text/css>*{margin:0padding:0border:0}
#fm { line-height: 24px list-style-type: none background:#666 }/*设置盒子的行高，去掉标记，设置背景颜色*/
#fm a { display: block width: 80px text-align:center }/*设置A标签为块元素不显示，宽度，居中*/
#fm a:link { color:#666 text-decoration:none } /* 设置未访问的链接样式*/
#fm a:visited { color:#666text-decoration:none } /* 设置已访问的链接样式 */
#fm a:hover { color:#FFFtext-decoration:nonefont-weight:bold } /* 当有鼠标悬停在链接上的颜色 */
#fm li { float: left width: 150px background:#CCC }
#fm li a:hover{ background:#999 }
#fm li ul { line-height: 27px list-style-type: nonetext-align:left left: -999em width: 80px position: absolute }
#fm li ul li{ float: left width: 80px background: #F6F6F6 }
#fm li ul a{ display: block width: 80pxwidth: 80pxtext-align:leftpadding-left:5px }
#fm li ul a:link { color:#666 text-decoration:none }
#fm li ul a:visited { color:#666text-decoration:none }
#fm li ul a:hover { color:#F3F3F3text-decoration:nonefont-weight:normal background:#C00 }
#fm li:hover ul { left: auto }
#fm li.sfhover ul { left: auto }
#content { clear: left }
</STYLE>
js代码为：
<SCRIPT type=text/javascript>function menuFix() {
var sfEls = document.getElementById("fm").getElementsByTagName("li")
for (var i=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(new RegExp("( ?|^)sfhover\\b"),
"")
}
}
}
window.onload=menuFix
</SCRIPT>
最后的效果图为：
以上就是用html做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。
