javascript鼠标滑过下拉菜单位置确定问题
其中的css倒数第二行：#navli.sfhoverul{left:auto;}是怎么确定下拉菜单位置的left:auto是什么意思auto改为定值就不行，auto是怎么...
其中的css倒数第二行：#nav li.sfhover ul {left: auto;}是怎么确定下拉菜单位置的 left:auto是什么意思 auto改为定值就不行，auto是怎么确定的位置
效果是这样的 下拉菜单自动在鼠标所指的block下边。
代码如下：
<style>
*{margin:0;padding:0;border:0;}
#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;}
#nav { line-height: 20px; list-style-type: none; margin-top:5px;}
#nav a { display: block; width: 77px; text-align:center; font-size:12px;}
#nav a:link { color:#FFF; text-decoration:none;margin:0;}
#nav a:visited {color:#FFF;text-decoration:none;margin:0;}
#nav a:hover {color:#C00;text-decoration:none;}
#nav li {float: left;}
#nav li a:hover{background:#FFFFFF;}
#nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;}
#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;}
#nav li ul a:link {color:#0d5097; text-decoration:none;}
#nav li ul a:visited {color:#0d5097;text-decoration:none;}
#nav li ul a:hover {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}
</style>
<body>
<script type=text/javascript>
<!--
function menuFix() {
var sfEls = document.getElementById("nav").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>
<div id=div_center>
<UL id=nav>
<LI style="MARGIN-LEFT: 10px"><A href="http://www.codefans.net">主站索引</A></LI>
<LI>
<A href="#">新闻中心</A>
<UL>
<LI><A href="#">·新闻中心1</A></LI>
<LI><A href="#">·新闻中心3</A></LI>
</UL>
</LI>
<LI><A href="#">企业简介</A>
<UL>
<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></UL></LI>
</div>
</body>
</html> 展开
效果是这样的 下拉菜单自动在鼠标所指的block下边。
代码如下：
<style>
*{margin:0;padding:0;border:0;}
#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;}
#nav { line-height: 20px; list-style-type: none; margin-top:5px;}
#nav a { display: block; width: 77px; text-align:center; font-size:12px;}
#nav a:link { color:#FFF; text-decoration:none;margin:0;}
#nav a:visited {color:#FFF;text-decoration:none;margin:0;}
#nav a:hover {color:#C00;text-decoration:none;}
#nav li {float: left;}
#nav li a:hover{background:#FFFFFF;}
#nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;}
#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;}
#nav li ul a:link {color:#0d5097; text-decoration:none;}
#nav li ul a:visited {color:#0d5097;text-decoration:none;}
#nav li ul a:hover {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}
</style>
<body>
<script type=text/javascript>
<!--
function menuFix() {
var sfEls = document.getElementById("nav").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>
<div id=div_center>
<UL id=nav>
<LI style="MARGIN-LEFT: 10px"><A href="http://www.codefans.net">主站索引</A></LI>
<LI>
<A href="#">新闻中心</A>
<UL>
<LI><A href="#">·新闻中心1</A></LI>
<LI><A href="#">·新闻中心3</A></LI>
</UL>
</LI>
<LI><A href="#">企业简介</A>
<UL>
<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></UL></LI>
</div>
</body>
</html> 展开
2个回答
展开全部
首先由#nav li ul这个定义了UL元素为绝对定位，位置为-999em,为的是在正常情况下隐藏二级菜单。当有鼠标事件的时候#nav li.sfhover ul {left: auto;}生效，用默认值覆盖原来设置的-999em以显示菜单。
auto : 默认值。无特殊定位，根据HTML定位规则在文档流中分配。
此处auto就是相当于对父元素的定位值为0，是受父元素位置影响，所以不能用数值。
auto : 默认值。无特殊定位，根据HTML定位规则在文档流中分配。
此处auto就是相当于对父元素的定位值为0，是受父元素位置影响，所以不能用数值。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
left auto和
left 0不是一样的么
left 0不是一样的么
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
