> 웹 프론트엔드 > HTML 튜토리얼 > 用superslide写的导航栏下拉错位_html/css_WEB-ITnose

用superslide写的导航栏下拉错位_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:37:47
원래의
1336명이 탐색했습니다.

如图


回复讨论(解决方案)

代码是:
html:


   


   

<script>jQuery("#box3").slide({ type:".menu", titCell:".nli", targetCell:".sub",effect:"slideDown",delayTime:300,triggerTime:0,returnDefault:false});</script>


css:
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.box3{width:1440px;
height:48px;
margin:0 auto;
background:url(images/navBg.jpg) center no-repeat;
position:relative;
z-index:1;}
.box3 ul{ width:1000px;
height:30px;
list-style:none;
margin:0;
padding-left:400px;
}
.box3 .nli{width:100px;
height:30px;
float:left;
font-size:20px;
text-align:center;
color:#FFFFFF;
padding-top:18px;
position:relative;
display:inline;}
.box3 .nli a{
display:block;
color:#FFFFFF;
text-decoration:none;}
.box3 .sub{display:none;
width:100px;
height:240px;
top:45px;
position:absolute;
margin:0;
padding:0;
list-style:none;
left:0;}

.box3 .sub li{zoom=1;
background-color:#00CCCC;
font-size:20px;
}

.box3 .sub a{
display:block;
text-decoration:none;
color:#FFFFFF;}
.box3 .sub a:hover{ background:#666666;color:#6600FF;}
.box3 .on a{ background-color:#666666;}

“关于舒适保”的二级菜单是四个啊?哪错位了?

“关于舒适保”的二级菜单是四个啊?哪错位了?


我的鼠标位置是在首页上 而出现的下拉菜单在关于宝舒适上 

估计<script>jQuery("#box3").slide({ type:".menu", titCell:".nli", targetCell:".sub",effect:"slideDown",delayTime:300,triggerTime:0,returnDefault:false});</script>
这句有问题,话说你要是放在导航栏的其他位置正常么?我猜是不是你放在任何位置都会显示“关于舒适保”的二级菜单。

估计<script>jQuery("#box3").slide({ type:".menu", titCell:".nli", targetCell:".sub",effect:"slideDown",delayTime:300,triggerTime:0,returnDefault:false});</script>
这句有问题,话说你要是放在导航栏的其他位置正常么?我猜是不是你放在任何位置都会显示“关于舒适保”的二级菜单。


不是 所有的都往后移了一个位置 最后一个与倒数第二个有重合


估计<script>jQuery("#box3").slide({ type:".menu", titCell:".nli", targetCell:".sub",effect:"slideDown",delayTime:300,triggerTime:0,returnDefault:false});</script>
这句有问题,话说你要是放在导航栏的其他位置正常么?我猜是不是你放在任何位置都会显示“关于舒适保”的二级菜单。


不是 所有的都往后移了一个位置 最后一个与倒数第二个有重合

我可能比较菜,所以<script>jQuery("#box3").slide({ type:".menu", titCell:".nli", targetCell:".sub",effect:"slideDown",delayTime:300,triggerTime:0,returnDefault:false});</script>这句我看不懂,我猜是这句就是显示下拉菜单的,但逻辑上我没理清楚。

你去看看这个帖子:http://bbs.csdn.net/topics/391818704。   他写的这个demo逻辑就清楚多了,但可能没有二级菜单滑动显示的效果,会突然显示出来。



估计<script>jQuery("#box3").slide({ type:".menu", titCell:".nli", targetCell:".sub",effect:"slideDown",delayTime:300,triggerTime:0,returnDefault:false});</script>
这句有问题,话说你要是放在导航栏的其他位置正常么?我猜是不是你放在任何位置都会显示“关于舒适保”的二级菜单。


不是 所有的都往后移了一个位置 最后一个与倒数第二个有重合

我可能比较菜,所以<script>jQuery("#box3").slide({ type:".menu", titCell:".nli", targetCell:".sub",effect:"slideDown",delayTime:300,triggerTime:0,returnDefault:false});</script>这句我看不懂,我猜是这句就是显示下拉菜单的,但逻辑上我没理清楚。

你去看看这个帖子:http://bbs.csdn.net/topics/391818704。   他写的这个demo逻辑就清楚多了,但可能没有二级菜单滑动显示的效果,会突然显示出来。
好的!谢谢!PS:如果不知道的话,你说看不懂的这个调用是大话主席写的superslide,是一个效果库,只不过因为不知道里面的实现,用起来的就显得比较难,并不是你菜。

怎么结贴啊。。。

怎么结贴啊。。。

头像可爱,人也可爱!
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿