码迷,mamicode.com
首页 > 其他好文 > 详细

下拉菜单

时间:2017-06-11 10:12:32      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:导航   pad   over   内容   bsp   text   下拉菜单   --   top   

---恢复内容开始---

原理是:鼠标移上去,有个事件,拉出两个东西。

首先是写一个div

<div id="daohanglan">

<div style="mangin-top:35px">与导航栏并列,写内容。位置需要定位</div>

然后 再写几个按钮div

      <div class="annui">新闻1</div>

      <div class="annui">新闻2</div>

      <div class="annui">新闻3</div>

</div>

 

然后再写全局的样式

<style>

*{ mangin:0px;

    padding:0px;

}

#daohanglan{height:30px;

    border:1px solid blue;

    width:280px;

position:absolute;

top:0px;

}

.annui{

float:left;

width:70px;

max-height:30px;

background-color:black;

text-alingn:center;

line-height:30px;

overflow:hidden;

 }

ul{

list-style:none;

}

li{

background-color:red;

display:none;

 

}

.anniu:hover{

display:bloak;

max-height:30px;

}

</style>

然后再写按钮中的内容,每一个按钮都写内容。

<ul>

<li></li>

<li></li>

<li></li>

</ul>

 

---恢复内容结束---

 

下拉菜单

标签:导航   pad   over   内容   bsp   text   下拉菜单   --   top   

原文地址:http://www.cnblogs.com/yunpeng521/p/6955427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!