js代码实现下拉菜单

效果js代码:functionShowSub(li){//函数定义varsubMenu=li.getElements…

大家好,又见面了,我是你们的朋友全栈君。

效果

js代码实现下拉菜单

 

js代码:

<script type=”text/javascript”>
function ShowSub(li) {//函数定义
var subMenu = li.getElementsByTagName(“ul”)[0] ;//获取
subMenu.style.display = ” block “;
}

function HideSub(li) {

var subMenu = li.getElementsByTagName(“ul”)[0];
subMenu.style.display = ” none “;
}

</script>

 

css样式:

*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}//ie7显示宽度的兼容性  设置width  而不用padding的自适应
a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}
ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
ul li ul{ display:none;}

 html代码

<div id=”nav”>

<ul>
<li><a href=”#”>首页</a></li>
<li οnmοuseοver=”ShowSub(this)” οnmοuseοut=”HideSub(this)” ><a href=”#”>课程大厅</a>
<ul>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Html/CSS</a></li>
</ul>
</li>
<li οnmοuseοver=”ShowSub(this)” οnmοuseοut=”HideSub(this)” ><a href=”#”>学习中心</a>
<ul>
<li><a href=”#”>视频学习</a></li>
<li><a href=”#”>实例练习</a></li>
<li><a href=”#”>问与答</a></li>
</ul>

</li>
<li><a href=”#”>经典案例</a></li>
<li><a href=”#”>关于我们</a></li>
</ul>

</div>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126470.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • c中构造函数的作用_python中构造方法的作用

    c中构造函数的作用_python中构造方法的作用C#中构造函数的作用共同点:都是实例化对象,初始化数据的默认构造是说所有的类都从祖先object那继承了空参的构造方法,你不写与写空参构造都存在,而有参数的构造一般是自己写的,写就有不写就没有,它的作用和空参的一样,只是它里面可以有参数,给你个例子来说明吧有一个类Monitor它有属性Stringheight;StringwidthpublicMonitor(){}publ

  • IDEA这些既好用又好玩的三十多个宝贝插件你还不知道吗?「建议收藏」

    小编整理的一些好用的有趣的插件如果有什么问题,欢迎大家评论,群文件也有这些IDEA插件QQ交流群:99979568IDEA下载插件教程如果无法在线下载插件,文末有我下载好的安装包,以及安装包安装的教程强烈推荐的插件PresentationAssistant快捷键展示Codota代码智能提示AlibabaJavaCodeGuidelines—阿里巴巴Java代码规范Translation-必备的翻译插件SequenceDiagra.

  • my03_使用空数据库搭建Mysql主从复制

    my03_使用空数据库搭建Mysql主从复制

  • C++在stack的deque实现

    C++在stack的deque实现

  • 交叉熵损失函数原理详解[通俗易懂]

    交叉熵损失函数原理详解[通俗易懂]交叉熵损失函数原理详解之前在代码中经常看见交叉熵损失函数(CrossEntropyLoss),只知道它是分类问题中经常使用的一种损失函数,对于其内部的原理总是模模糊糊,而且一般使用交叉熵作为损失函数时,在模型的输出层总会接一个softmax函数,至于为什么要怎么做也是不懂,所以专门花了一些时间打算从原理入手,搞懂它,故在此写一篇博客进行总结,以便以后翻阅。交叉熵简介交叉熵是信息论中的一个…

  • Android 程序员等级要求

    Android 程序员等级要求很多Android开发者已经度过了初级、中级,如何成为一个Android高手呢?Android123就各个级别的程序员应该掌握哪些内容作为下面分类。  一、初级  1.拥有娴熟的Java基础,理解设计模式,比如OOP语言的工厂模式要懂得。   2.掌握AndroidUI控件、AndroidJava层API相关使用。   迈向中级,最好再次更新下Ja

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号