简单的下拉导航条代码

来源：互联网发布：百度 mac 五笔词库编辑：程序博客网时间：2024/04/30 10:57

利用HTML+CSS+jquery实现一个特别简单鼠标经过弹出下拉的效果
HTML代码

<!doctype html><html lang="en"><head>        <meta charset="UTF-8">        <title></title>    <link rel="stylesheet" type="text/css" href="./css/bin.css">        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><header></header><!-- 导航条 --><div id="div">        <ul>            <li><a href="">PHP</a>          <ul>            <li>php的32中设计模式</li>            <li>memeched和redis的区别</li>            <li>分布式</li>          </ul>        </li>        </ul>        <ul>            <li><a href="">Mysql</a>          <ul>            <li>数据库优化</li>            <li>23条提高</li>            <li>酷站</li>          </ul>        </li>        </ul>        <ul>            <li><a href="">JaveScript</a>          <ul>            <li>html5</li>            <li>css</li>            <li>过渡动画</li>          </ul>        </li>        </ul>        <ul>            <li><a href="">Vue.js</a>                <img src="./image/news.png" alt"">          <ul>            <li>Mvvm是啥</li>            <li>模型绑定</li>            <li>非常6+1</li>          </ul>        </li>        </ul>    </div></body></html>

CSS代码

body{background-image: url(../image/image.jpg);}img{position: relative;top: -10px;right: -10xp;}header {margin: 22px auto;}/*导航条下拉样式*/ul { margin:0; padding:0;}#div {text-align：center;margin:0 auto;}#div ul li{float:left;height:28px;display:inline;line-height:28px; padding:0px 20px;position:relative;}#div ul li a{font-size: 25px;color: white;}#div ul li ul{position:absolute;z-index:99; display:none;top:28px;  width:100px;left:0px;}#div ul li ul li{display:block;width:100px;height:26px;line-height:26px;background-color:#666;border-bottom:1px #FFFFFF solid;}

jquery

$(function(){      $(" ul li").hover(function(){            $(this).children("ul").slideDown();      },function(){            $(this).children("ul").slideUp();      })      $("ul li ul li").hover(function(){         $(this).css("background","blue");         },function(){         $(this).css("background","#666");         })})

阅读全文

0 0