jquery实现的一个超级简单的下拉菜单

谁借莪１个温暖的怀抱￠ 2022-07-16 06:21 178阅读 0赞

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript" src="jquery-1.11.1.js"></script> 
    <style> 
    
    nav a { 
    text-decoration: none; 
    } 
    nav > ul > li { 
    float: left; 
    text-align: center; 
    padding: 0 0.5em; 
    } 
    
    nav li ul.sub-menu { 
    display: none; 
    padding-left: 0 !important; 
    } 
    
    .sub-menu li { 
    color: white; 
    } 
    
    .sub-menu li:hover { 
    background-color: black; 
    } 
    
    .sub-menu li:hover a { 
    color: white; 
    } 
    
    ul { 
    list-style: none; 
    } 
    </style> 
    </head> 
    <body> 
    <nav> 
    <ul> 
    <li><a href="#">Home 
    <ul class="sub-menu"> 
    <li><a href="#">sub1</a></li> 
    <li><a href="#">sub2</a></li> 
    <li><a href="#">sub3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Programming 
    <ul class="sub-menu"> 
    <li><a href="#">sub1</a></li> 
    <li><a href="#">sub2</a></li> 
    <li><a href="#">sub3</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Japanese 
    <ul class="sub-menu"> 
    <li><a href="#">sub1</a></li> 
    <li><a href="#">sub2</a></li> 
    <li><a href="#">sub3</a></li> 
    </ul> 
    </li> 
    </ul> 
    </nav> 
    </body> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('nav li').hover(function() { 
    $(this).find('.sub-menu').css('display', 'block'); 
    }, function() { 
    $(this).find('.sub-menu').css('display', 'none'); 
    }); 
    }); 
    </script> 
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery实现的一个超级简单的下拉菜单

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jqu

谁借莪１个温暖的怀抱￠/ 2022年07月16日 06:21/ 0 赞/ 179 阅读

相关 jquery简单菜单下拉导航

jquery简单菜单下拉导航代码如下：复制运行即可 <!doctype html> <html> <head> <meta c

爱被打了一巴掌/ 2022年07月15日 04:20/ 0 赞/ 309 阅读

相关基于jquery、css的下拉菜单实现

近期一系统中需要一个二级下拉菜单，由于需要根据UI的设计稿来实现，通过尝试了使用bootstrap，主要使用list-group和collapse来完成，但是发现样式需要较大的

ゞ浴缸里的玫瑰/ 2022年07月11日 05:42/ 0 赞/ 288 阅读

相关 jquery 实现多级下拉菜单

$(document).ready(function() \{ function megaHoverOver()\{ $(this).find(".sub"

梦里梦外;/ 2022年06月14日 08:52/ 0 赞/ 523 阅读

相关 jQuery实战_下拉菜单的实现

mouseover事件和mouseenter 事件的区别 mouseover事件会触发多次，每遇到一个子元素就会触发一次。 mouseenter 事件只会触发一次。鼠标

深碍√TFBOYSˉ_/ 2022年05月22日 12:39/ 0 赞/ 255 阅读

相关 js实现简单的下拉折叠菜单

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现简单的下

ゞ浴缸里的玫瑰/ 2022年05月09日 06:58/ 0 赞/ 224 阅读

相关 jQuery实现下拉菜单功能

注意要引入正确的jQuery文件 <!DOCTYPE html> <html> <head> <title>下拉式菜单</title>

清疚/ 2022年04月02日 03:39/ 0 赞/ 377 阅读

相关下拉菜单的实现

CSS实现下拉菜单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

落日映苍穹つ/ 2021年12月16日 08:53/ 0 赞/ 421 阅读

相关网页下拉菜单-jQuery实现-案例

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

- 日理万妓/ 2021年06月22日 15:36/ 0 赞/ 553 阅读

相关 js实现简单的下拉菜单

转自:[慕课网][Link 1]。效果图如下: ![20151216115120414][] 代码如下: <!DOCTYPE html PUBLIC "

青旅半醒/ 2021年06月10日 20:41/ 0 赞/ 585 阅读