用ul标签实现下拉框效果 如何将下拉框变为出现在上方

wa1k_slowly 2016-11-21 04:04:18
<style>
.navbare{
width:100%;
height:215px;
position:absolute;
z-index:10;
background:#4E4E4E;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity: 0.7;
margin-top:1500px;
}
.nave{
width:830px;
float:left;
margin-left:350px;
}
.nave a{
color:#fff;
}
.nave h3{
float:left;
font-weight:normal;
font-size:16px;
}
.nave .n{
float:left;
position:relative;
margin-left:10px;
}
.nave h3 a{display:block;
padding:0 20px;
}
.nave h3 a:hover{
color:#0068f5;
}
.nave .subs{
display:none;
position:absolute;
left:0;
top:40px;
height:90px;
line-height:26px;
padding:7px 0;
background:#545454;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity: 0.7;
}
.nave .subs li{
float:left;
}
.nave .subs li a{
display:block;
padding:0 15px;
margin:0 10px;
}
.nave .subs li a:hover{
color:#0024ff;
}
</style>

<div class="navbare">
<ul class="nave clearfix">
<li id="n2" class="n">
<ul class="subs">
<li><a href="#">如何使用</a></li>
<li><a href="#">如何使用</a></li>
<li><a href="#">如何使用</a></li>
<li><a href="#">如何使用</a></li>
</ul>
<h3><a target="_blank" href="http://www.superslide2.com/">如何使用</a></h3>
</li>

<li id="n3" class="n">
<ul class="subs">
<li><a href="#">查看参数</a></li>
<li><a href="#">查看参数</a></li>
<li><a href="#">查看参数</a></li>
<li><a href="#">查看参数</a></li>
</ul>
<h3><a target="_blank" href="http://www.superslide2.com/">查看参数</a></h3>

</li>

<li id="n4" class="n">
<ul class="subs">
<li><a href="#">基础效果</a></li>
<li><a href="#">基础效果</a></li>
<li><a href="#">基础效果</a></li>
<li><a href="#">基础效果</a></li>
</ul>
<h3><a target="_blank" href="http://www.superslide2.com/">基础效果</a></h3>

</li>
<li id="n5" class="n">
<ul class="subs">
<li><a href="#">扩展效果</a></li>
<li><a href="#">扩展效果</a></li>
<li><a href="#">扩展效果</a></li>
<li><a href="#">扩展效果</a></li>
</ul>
<h3><a target="_blank" href="http://www.superslide2.com/">扩展效果</a></h3>

</li>
</ul>
</div>


<script type="text/javascript">
jQuery(".nave").slide({
type:"menu", //效果类型
titCell:".n", // 鼠标触发对象
targetCell:".subs", // 效果对象,必须被titCell包含
delayTime:500, // 效果时间
triggerTime:0, //鼠标延迟触发时间
returnDefault:true //返回默认状态
});
</script>
...全文
426 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
wa1k_slowly 2016-11-21
  • 打赏
  • 举报
回复
我全部写完了 但是不能出现在上方

87,910

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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