求大神告知这该怎么解?

叫我梁大侠 2014-03-27 06:12:02
<div id="topmenu">

<div class="topmenu">
<ul>
<li class="fir"><a href="../"><%=Dh_siteName%></a></li>
<li class="ulist" onmouseover="shlist(1)" id="ul1"><a href="javascript:void(0)">主题社区</a><div class="sulist" id="us1" style="width:180px;" onmouseout="chlist(1)">
<a href="#">南康时事开讲</a><a href="#">房地产</a>
<a href="#">亲子乐园</a>
<a href="#">吃货大队</a>
<a href="#">游山玩水</a>
<a href="#">女人帮</a>
<a href="#">影音风</a>
<a href="#">摄影</a>
<a href="#">宠物</a>
<a href="#">竞技</a>
<a href="#">闲的来聊</a>
</div>
</li>
<li class="ulist" onmouseover="shlist(2)" id="ul2"><a href="javascript:void(0)">生活服务</a><div class="sulist" id="us2" style="width:140px;" onmouseout="chlist(2)">
<a href="#">租房</a>
<a href="#">二手房</a>
<a href="#">亲子乐园</a>
<a href="#">找工作</a>
<a href="#">分类信息</a>
</div></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
var topmenu = jQuery("#topmenu");
var topmenu_top = topmenu.offset().top;
reset_topmenu_top(topmenu, topmenu_top);
jQuery(window).scroll(function() {
reset_topmenu_top(topmenu, topmenu_top);
});
});
function reset_topmenu_top(topmenu, topmenu_top) {
var document_scroll_top = jQuery(document).scrollTop();
if (document_scroll_top > topmenu_top) {
topmenu.css('top', document_scroll_top);
}
if (document_scroll_top <= topmenu_top) {
topmenu.css('top', topmenu_top);
}
}
</script>

这里是一个随滚动条滚动置顶的导航
里面嵌入了类似滑动门的效果
CSS如下:

#topmenu{
top:0;
position:absolute;
background:#e9e1cb;
width:100%;
margin:0 auto;
clear:both;
overflow:hidden;
z-index:11;
left:0;
color:#958b6d;
font-size:14px;
border-bottom:1px solid #dad2bd;
}
.topmenu{
width:990px;
margin:0 auto;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu ul li{
float:left;
text-align:center;
width:90px;
list-style:none;
line-height:30px;
height:30px;
}
.topmenu ul li.fir{
border-right:1px solid #dad2bd;
}
.topmenu a{
color:#958b6d;
text-decoration:none;
}
.topmenu a:hover{
text-decoration:underline;
}
.topmenu ul li.ulist{
display:block;
background:url(x.png) no-repeat 99% 50%;
}
.topmenu ul li.xlist{
background:#FFFFFF url(s.png) no-repeat 99% 50% ;
}
.sulist{
display:none;
left:0;
top:0;
position:absolute;
border-left:1px solid #dad2bd;
border-bottom:1px solid #dad2bd;
border-right:1px solid #dad2bd;
overflow:hidden;
background:#FFFFFF;
z-index:12;
}
.sulist a{
float:left;
display:block;
padding:3px 5px;
text-align:center;
font-size:12px;
margin:3px 5px;
}
.sulist a:hover{
background:#F1F1F1;
text-decoration:none;
}

JS文件如下:
function shlist(v)
{
for(var i=1;i<=10;i++)
{
if(i==v)
{
$("#ul"+i).attr("class","xlist");
var txt=$("#ul"+i).offset();
txtop=txt.top;
txleft=txt.left;
$("#us"+i).css({top:txtop+30,left:txleft-1});
$("#us"+i).show(0);
}
else
{
$("#ul"+i).attr("class","ulist");
$("#us"+i).hide(0);
}
}
}
function chlist(v)
{
$("#ul"+v).attr("class","ulist");
$("#us"+v).hide(0);
}

现在就出现了 鼠标移到主题社区或生活服务的时候 里面的子菜单不会显示出来
我把css里面的#topmenu{
top:0;
position:absolute;
background:#e9e1cb;
width:100%;
margin:0 auto;
clear:both;
overflow:hidden;
z-index:11;
left:0;
color:#958b6d;
font-size:14px;
border-bottom:1px solid #dad2bd;
}
position:absolute; 属性删掉之后 就可以正常了 但是那个导航就不会跟随滚动条置顶了
求大神告知 这该怎么办呀 谢谢
...全文
230 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2014-03-28
  • 打赏
  • 举报
回复
容器absolute定位后,你的子菜单absolute的定位就是相对于容器了,不是相对于当前的视窗,由于你的容器又设置了overflow:hidden,导致子菜单被隐藏起来了,去掉overflow属性,给li容器增加position:relative定位,这样top不用动态设置,固定设置为菜单项的高度即可。。
<style>
#topmenu{top:0;position:absolute;background:#e9e1cb;width:100%;margin:0 auto;clear:both;/*overflow:hidden;*/z-index:11;left:0; color:#958b6d;font-size:14px;border-bottom:1px solid #dad2bd;}
.topmenu{width:990px;margin:0 auto;}
.topmenu ul{margin:0;padding:0;}
.topmenu ul li{float:left;text-align:center;width:90px;list-style:none;line-height:30px;height:30px;position:relative}
.topmenu ul li.fir{border-right:1px solid #dad2bd;}
.topmenu a{color:#958b6d;text-decoration:none;}
.topmenu a:hover{text-decoration:underline;}
.topmenu ul li.ulist{display:block;background:url(x.png) no-repeat 99% 50%;}
.topmenu ul li.xlist{background:#FFFFFF url(s.png) no-repeat 99% 50% ;}
.sulist{display:none;left:0;top:30px;/*为你的li高度,此时div相对于li定位*/position:absolute;border:1px solid #dad2bd;border-top:none;overflow:hidden;background:#FFFFFF;z-index:12;}
.sulist a{float:left;display:block;padding:3px 5px;text-align:center;font-size:12px;margin:3px 5px;}
.sulist a:hover{background:#F1F1F1;text-decoration:none;}
</style>
<div id="topmenu">

<div class="topmenu">
<ul>
<li class="fir"><a href="../"><%=Dh_siteName%></a></li>
<li class="ulist" onmouseover="shlist(1)" id="ul1"><a href="javascript:void(0)">主题社区</a><div class="sulist" id="us1" style="width:180px;" onmouseout="chlist(1)">
<a href="#">南康时事开讲</a><a href="#">房地产</a>
<a href="#">亲子乐园</a>
<a href="#">吃货大队</a>
<a href="#">游山玩水</a>
<a href="#">女人帮</a>
<a href="#">影音风</a>
<a href="#">摄影</a>
<a href="#">宠物</a>
<a href="#">竞技</a>
<a href="#">闲的来聊</a>
</div>
</li>
<li class="ulist" onmouseover="shlist(2)" id="ul2"><a href="javascript:void(0)">生活服务</a><div class="sulist" id="us2" style="width:140px;" onmouseout="chlist(2)">
<a href="#">租房</a>
<a href="#">二手房</a>
<a href="#">亲子乐园</a>
<a href="#">找工作</a>
<a href="#">分类信息</a>
</div></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div style="height:1500px">现在就出现了 鼠标移到主题社区或生活服务的时候 里面的子菜单不会显示出来</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        var topmenu = jQuery("#topmenu");
        var topmenu_top = topmenu.offset().top;
        reset_topmenu_top(topmenu, topmenu_top);
        jQuery(window).scroll(function () {
            reset_topmenu_top(topmenu, topmenu_top);
        });
    });
    function reset_topmenu_top(topmenu, topmenu_top) {
        var document_scroll_top = jQuery(document).scrollTop();
        if (document_scroll_top > topmenu_top) {
            topmenu.css('top', document_scroll_top);
        }
        if (document_scroll_top <= topmenu_top) {
            topmenu.css('top', topmenu_top);
        }
    }
    function shlist(v) {
        for (var i = 1; i <= 10; i++) {
            if (i == v) {
                $("#ul" + i).attr("class", "xlist");
                //var txt = $("#ul" + i).offset();
                //txtop = txt.top;
                //txleft = txt.left;
                //$("#us" + i).css({ top: txtop + 30, left: txleft - 1 });
                $("#us" + i).show(0);
            }
            else {
                $("#ul" + i).attr("class", "ulist");
                $("#us" + i).hide(0);
            }
        }
    }
    function chlist(v) {
        $("#ul" + v).attr("class", "ulist");
        $("#us" + v).hide(0);
    }
</script>
Go 旅城通票 2014-03-28
  • 打赏
  • 举报
回复
IE7-下或者未添加xhtml申明时还有个bug,就是浮动元素碰到容器边界会自动内换行
.sulist a{float:left;display:block;padding:3px 5px;text-align:center;font-size:12px;margin:3px 5px;white-space: nowrap;/*fix IE7- float*/}
叫我梁大侠 2014-03-28
  • 打赏
  • 举报
回复
引用 1 楼 showbo 的回复:
容器absolute定位后,你的子菜单absolute的定位就是相对于容器了,不是相对于当前的视窗,由于你的容器又设置了overflow:hidden,导致子菜单被隐藏起来了,去掉overflow属性,给li容器增加position:relative定位,这样top不用动态设置,固定设置为菜单项的高度即可。。
<style>
#topmenu{top:0;position:absolute;background:#e9e1cb;width:100%;margin:0 auto;clear:both;/*overflow:hidden;*/z-index:11;left:0; color:#958b6d;font-size:14px;border-bottom:1px solid #dad2bd;}
.topmenu{width:990px;margin:0 auto;}
.topmenu ul{margin:0;padding:0;}
.topmenu ul li{float:left;text-align:center;width:90px;list-style:none;line-height:30px;height:30px;position:relative}
.topmenu ul li.fir{border-right:1px solid #dad2bd;}
.topmenu a{color:#958b6d;text-decoration:none;}
.topmenu a:hover{text-decoration:underline;}
.topmenu ul li.ulist{display:block;background:url(x.png) no-repeat 99% 50%;}
.topmenu ul li.xlist{background:#FFFFFF url(s.png) no-repeat 99% 50% ;}
.sulist{display:none;left:0;top:30px;/*为你的li高度,此时div相对于li定位*/position:absolute;border:1px solid #dad2bd;border-top:none;overflow:hidden;background:#FFFFFF;z-index:12;}
.sulist a{float:left;display:block;padding:3px 5px;text-align:center;font-size:12px;margin:3px 5px;}
.sulist a:hover{background:#F1F1F1;text-decoration:none;}
</style>
<div id="topmenu">

<div class="topmenu">
<ul>
<li class="fir"><a href="../"><%=Dh_siteName%></a></li>
<li class="ulist" onmouseover="shlist(1)" id="ul1"><a href="javascript:void(0)">主题社区</a><div class="sulist" id="us1" style="width:180px;" onmouseout="chlist(1)">
<a href="#">南康时事开讲</a><a href="#">房地产</a>
<a href="#">亲子乐园</a>
<a href="#">吃货大队</a>
<a href="#">游山玩水</a>
<a href="#">女人帮</a>
<a href="#">影音风</a>
<a href="#">摄影</a>
<a href="#">宠物</a>
<a href="#">竞技</a>
<a href="#">闲的来聊</a>
</div>
</li>
<li class="ulist" onmouseover="shlist(2)" id="ul2"><a href="javascript:void(0)">生活服务</a><div class="sulist" id="us2" style="width:140px;" onmouseout="chlist(2)">
<a href="#">租房</a>
<a href="#">二手房</a>
<a href="#">亲子乐园</a>
<a href="#">找工作</a>
<a href="#">分类信息</a>
</div></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div style="height:1500px">现在就出现了 鼠标移到主题社区或生活服务的时候 里面的子菜单不会显示出来</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        var topmenu = jQuery("#topmenu");
        var topmenu_top = topmenu.offset().top;
        reset_topmenu_top(topmenu, topmenu_top);
        jQuery(window).scroll(function () {
            reset_topmenu_top(topmenu, topmenu_top);
        });
    });
    function reset_topmenu_top(topmenu, topmenu_top) {
        var document_scroll_top = jQuery(document).scrollTop();
        if (document_scroll_top > topmenu_top) {
            topmenu.css('top', document_scroll_top);
        }
        if (document_scroll_top <= topmenu_top) {
            topmenu.css('top', topmenu_top);
        }
    }
    function shlist(v) {
        for (var i = 1; i <= 10; i++) {
            if (i == v) {
                $("#ul" + i).attr("class", "xlist");
                //var txt = $("#ul" + i).offset();
                //txtop = txt.top;
                //txleft = txt.left;
                //$("#us" + i).css({ top: txtop + 30, left: txleft - 1 });
                $("#us" + i).show(0);
            }
            else {
                $("#ul" + i).attr("class", "ulist");
                $("#us" + i).hide(0);
            }
        }
    }
    function chlist(v) {
        $("#ul" + v).attr("class", "ulist");
        $("#us" + v).hide(0);
    }
</script>
谢谢

28,390

社区成员

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧