• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

代码:

!声明文档类型

html lang='en '

meta charset='UTF-8 '

标题文档/标题

脚本src=' jquery-3。4 .1 .js '/脚本

风格

* {

保证金: 0;

划: 0;

}

一个{

color: # fff

文本装饰:无;

}

ul {

列表样式:无;

}

#nar-wrap {

高度: 600像素

背景色:粉色;

字体系列: '微软雅黑;

}

#nav-div {

高度: 30px

高度: 1000像素

背景色: # e60 CEB;

保证金: 0自动;

位置:相对;

}

#导航分区。导航{

列表样式:无;

位置:绝对;

}。下拉菜单{

位置:相对;

z指数: 999;

向左浮动:

边距-右侧: 30px

行高: 30px

文本对齐:居中;

最小宽度: 48px

padding: 0 5px

}。下拉img {

垫底: 5px

左填充left: 5px

}。下拉菜单-内容{

显示:无;

背景色: # ff78f 2;

}。下拉列表-内容李{

border-top : 1px solid # fff;

font-size : 14px

}

ul li a:hover {

背景色:紫色;

}

/风格

/头

身体

氕购物网站导航条/h1

整点

div id='nar-wrap '

div id='nav-div '

ul class='nav '

李='下拉框'

a href='# '首页/a

/李

李='下拉框'

a href='# '幸福年货节/a

/李

李='下拉框'

a href='# '新品直达站/a

/李

李='下拉框'

a href='# '女装我

mg src="image/arrow.jpg"></a>                     <ul class="drop-down-content" style="width:76px;">                         <li><a href="#">韩流时尚</a></li>                         <li><a href="#">日系森女</a></li>                         <li><a href="#">英伦帅气</a></li>                         <li><a href="#">欧美风尚</a></li>                     </ul>                 </li>                 <li class="drop-down">                     <a href="#">美妆</a><img src="image/arrow.jpg"></a>                     <ul class="drop-down-content" style="width:68px;">                         <li><a href="#">面膜</a></li>                         <li><a href="#">护肤</a></li>                         <li><a href="#">彩妆</a></li>                         <li><a href="#">护肤套装</a></li>                     </ul>                 </li>                 <li class="drop-down">                     <a href="#">国际</a><img src="image/arrow.jpg"></a>                     <ul class="drop-down-content" style="width:48px;">                         <li><a href="#">韩国</a></li>                         <li><a href="#">日本</a></li>                         <li><a href="#">欧洲</a></li>                         <li><a href="#">美洲</a></li>                     </ul>                 </li>                 <li class="drop-down">                     <a href="#"></a>                 </li>                 <li class="drop-down">                     <a href="#"></a>                 </li>                 <li class="drop-down">                     <a href="#">运动</a><img src="image/arrow.jpg"></a>                     <ul class="drop-down-content" style="width:48px;">                         <li><a href="#">足球</a></li>                         <li><a href="#">篮球</a></li>                         <li><a href="#">排球</a></li>                         <li><a href="#">气球</a></li>                     </ul>                 </li>                 <li class="drop-down">                     <a href="#">母婴</a></a><img src="image/arrow.jpg"></a>                     <ul class="drop-down-content" style="width:48px;">                         <li><a href="#">奶嘴</a></li>                         <li><a href="#">奶粉</a></li>                         <li><a href="#">小车</a></li>                         <li><a href="#">小房</a></li>                     </ul>                 </li>                 <li class="drop-down">                     <a href="#">鞋包</a><img src="image/arrow.jpg"></a>                     <ul class="drop-down-content" style="width:48px;">                         <li><a href="#">女鞋</a></li>                         <li><a href="#">男鞋</a></li>                         <li><a href="#">女包</a></li>                         <li><a href="#">男包</a></li>                     </ul>                 </li>             </ul>         </div>     </div>     <script>         $(function() {             $('.nav>li').mouseover(function() {                 $(this).children('ul').stop().slideDown(1000);             });             $('.nav>li').mouseout(function() {                 $(this).children('ul').stop().slideUp(1000);             });             $('.nav li').hover(function() {                 $(this).children('ul').stop().slideDown();             }, function() {                 $(this).children('ul').stop().slideUp(1000);             });             $('.nav>li').hover(function() {                 $(this).children('ul').stop().slideToggle(1000);             });         })     </script> </body>
</html> 运行结果: jxkt3unf2hh4072.png

 

 经过的时候导航条会拉下,离开的时候导航条会收起。

Link to comment
Share on other sites