相连处无边框的效果可以通过层叠和浮动来实现,只要左侧内容向右"压"去一个边框的位置,就可将右侧的边框隐去.
用什么标签并不重要,都能实现.
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做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/htmlcharset=GB2312">
<script type="text/javascript">
function selectAll(obj){
obj.select()
}
</script>
</head>
<body>
<input type="text" onfocus="selectAll(this)" value="242333333333333333333333333333333">
</body>
</html>
不知道你的html懂多少 呵呵,这个页面只有一个文本框,value是默认的,这个可以去掉,你说的点击一下的效果实际是 让文本框获取焦点,就是需要触发onfocus这个事件,让他执行selectAll函数,这个函数传递需要一个能获得对象的参数,可以是id的字符串,然后到函数里使用getElementById获取对象,亦可以直接传入对象本身,我这里使用this直接传入对象.其实函数内语句很简单,就是对象的select()方法就可以实现选中效果.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）