HTML实现二级菜单

最新推荐文章于 2024-09-03 14:06:51 发布
最新推荐文章于 2024-09-03 14:06:51 发布
阅读量1.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xunannan0624/article/details/52903455
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
*{margin:0px; padding:0px;}
ul,ol{list-style:none;}
nav{width:100%; height:50px; background:#f00;}
#navContainer{width:80%; height:50px; background:#ccc; margin:0px auto; z-index:100; position:relative; z-index:100;}

#navContainer li{width:80px; height:50px; float:left; background:#ccc;}
#navContainer a{display:block; width:80px; height:50px; float:left; text-decoration:none; text-align:center; line-height:50px;}
#navContainer a:hover{background:#39F;}
#navContainer ol{width:80px;} 
#subNav{display:none;}


</style>
        <script>
window.onload=function(){
//父节点parentNode  子节点childNodes  同胞节点nextSibling
var ulObj = document.getElementById("navContainer");
var liObjs = ulObj.childNodes;//包括 标签1  属性2   文本3
for(var i =0;i<liObjs.length;i++){
if(liObjs.item(i).nodeType==1){ //nodeType 对象的类型：标签1  属性2   文本3  注释8
liObjs.item(i).onmouseover=function(){
this.getElementsByTagName("ol")[0].style.display="block";
}
liObjs.item(i).onmouseout=function(){
this.getElementsByTagName("ol")[0].style.display="none";
}
}
}
}
</script>
    </head>
    
    <body>
    <nav>
            <ul id="navContainer">
                <li>
                   <a href="#">首页</a>             
                </li>
                <li>
                   <a href="#">产品中心</a> 
                   <ol id="subNav">
                    <li>
                        <a href="#">标题</a>
                        </li>
                    <li>
                        <a href="#">标题</a>
                        </li>
                    <li>
                        <a href="#">标题</a>
                        </li>
                   </ol>            
                </li> 
               <li>
                   <a href="#">产品中心</a> 
                   <ol id="subNav">
                    <li>
                        <a href="#">标题</a>
                        </li>
                    <li>
                        <a href="#">标题</a>
                        </li>
                    <li>
                        <a href="#">标题</a>
                        </li>
                   </ol>            
                </li> 
<li>
                   <a href="#">产品中心</a> 
                   <ol id="subNav">
                    <li>
                        <a href="#">标题</a>
                        </li>
                    <li>
                        <a href="#">标题</a>
                        </li>
                    <li>
                        <a href="#">标题</a>
                        </li>
                   </ol>            
                </li> 
               
               
            </ul>
                
        </nav>
        
                             
                                
                                                                
                                                                   
                                                                   
                                                                   
                                                                   
</body>
</html>
html 二级菜单
c++表的创建
09-19 919
网页设计的一级菜单和二级菜单一级菜单的应用table 布局css样式设置二级菜单heml代码主要css设置效果展示![在这里插入图片描述](https://img-blog.csdnimg.cn/20190919222504252.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly...
html实现二级菜单自动打开,纯CSS实现鼠标滑过显示子菜单的二级菜单效果
weixin_34824634的博客
05-31 1206
本文实例讲述了纯CSS实现鼠标滑过显示子菜单的二级菜单效果。分享给大家供大家参考。具体如下：这是一款基于纯CSS实现的菜单，当鼠标划过的时候，子菜单会出现，没有过多修饰，简约不失美观，稍加修善就是一款好菜单。在兼容性方面，本菜单也做的不错。运行效果截图如下：在线演示地址如下：具体代码如下：复制代码代码如下:/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
html 学习二级菜单
y_yJava的博客
08-09 1267
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;style type="text/css"&gt;      
HTML--二级菜单的实现
lkfmiaomiao的博客
09-06 5676
二级菜单练习 练习使用display display:none;/block;/inline-block; 练习代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二级菜单操作</title> <style> *...
二级选项卡
m0_48893127的博客
03-21 148
二级选项卡
html php 选项卡,html怎么实现二级选项卡
weixin_39714383的博客
03-10 85
html实现二级选项卡的方法：首先打开写网页代码的软件，并新建一个html网页文件，在body里写上html代码；然后在【】标签里写上css代码即可。本教程操作环境：windows7系统、html5版，DELL G3电脑，该方法适用于所有品牌电脑。html实现二级选项卡的方法：1、打开写网页代码的软件，并新建一个html网页文件，在body里写上html代码：一级二级二级2、在里写上css代码：....
vue.js实现二级菜单效果
10-16
Vue.js实现二级菜单效果涉及的关键知识点主要包括Vue.js基础、组件化开发、动态类绑定、事件处理、条件渲染等。以下是基于给定文件信息的详细知识点介绍： 1. Vue.js基础 Vue.js是一个构建用户界面的渐进式...
原生js实现二级联动菜单
10-15
这种菜单的特性是，当用户在第一级菜单中选择一个选项时，第二级菜单会根据所选的选项动态更新其内容。本篇文章将详细介绍如何使用原生JavaScript实现二级联动菜单。 首先，我们需要了解HTML结构。在示例代码中，有...
js实现二级菜单点击显示当前内容效果
10-18
在网页设计中，二级菜单是一种常见的交互元素，用于提供更精细的导航结构。本文将详细介绍如何使用...通过这样的方式，我们可以实现二级菜单点击时展示特定内容的功能，使用户能够更加便捷地访问网站的各个部分。
bootstrap实现二级下拉菜单效果
08-28
Bootstrap 实现二级下拉菜单效果 Bootstrap 是一个流行的前端框架，提供了许多实用的 UI 组件，包括按钮、导航、 Alerts 等。今天，我们将详细介绍如何使用 Bootstrap 实现二级下拉菜单效果。 首先，让我们了解...
超实用漂亮精美html菜单源码
07-26
超实用漂亮精美html菜单源码!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip
01-09
HTML制作多级菜单_一级下拉菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip
html如何用表格做二级菜单栏,Excel表格制作二级下拉菜单步骤
weixin_35886660的博客
06-27 532
Excel表格制作二级下拉菜单步骤导语：通过2级菜单，倒是可以比较深入熟悉 INDIRECT, INDEX, OFFSET, 这三个函数，是你要想学excel函数，估计你肯定过的关。下面的是百分网小编为大家搜集的Excel表格制作二级下拉菜单步骤，希望能帮到你。在论坛里看帖子，有一点比较累，很多都是直接用excel文件里做说明，你需要下载文件。我这里就全部用图来说明。不过二级菜单的第一级的做法，都...
HTML+CSS+Query实现二级菜单
最新发布
可可的博客
09-03 2506
在网页设计中，导航菜单是非常重要的部分之一，尤其是具有二级下拉菜单的导航栏，可以提升用户体验。本文将通过HTML、CSS和jQuery实现一个具有二级菜单标题的导航栏，并详细讲解每一步的实现过程。在网页设计中，导航菜单是非常重要的部分之一，尤其是具有二级下拉菜单的导航栏，可以提升用户体验。本文将通过HTML、CSS和jQuery实现一个具有二级菜单标题的导航栏，并详细讲解每一步的实现过程。我们需要确保二级菜单在正常情况下是隐藏的，只有当用户将鼠标悬停在相应的一级菜单项上时才显示。/* 二级菜单样式 */
html中二级菜单以及主页的实现，HTML+css
weixin_63478784的博客
02-14 4756
t图书管理系统中使用HTML+css实现的二级菜单以及首页，也有float属性
【HTML】模拟二级菜单【附源代码】
Young_Pro的博客
08-25 2070
通过 Html 搭配 CSS 模拟二级菜单的实现
java联动_【JavaWeb】实现二级联动菜单
weixin_30346649的博客
02-12 401
实现效果频道信息package demo;public class Channel {private String code; //频道编码private String name; //频道名称public Channel() {}public Channel(String code, String name) {super();this.code = code;this.name = name;...
html 全屏状态栏,HTML5 全屏菜单
weixin_33734921的博客
05-31 253
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);body, html {background: #222;font-family: 'Oswald', sans-serif;height: 100%;margin: 0;padding: 0 0;position: relat...
【JavaWeb】实现二级联动菜单
weixin_30877227的博客
08-04 847
实现效果 频道信息 package demo; public class Channel { private String code; //频道编码 private String name; //频道名称 public Channel() { } public Channel(String code, String name) { ...
html实现二级菜单
05-28
HTML实现二级菜单一般使用嵌套列表来实现，具体步骤如下： 1. 在HTML中创建一个无序列表（ul），列表项（li）即为一级菜单。 2. 在一级菜单中为需要添加二级菜单的菜单项添加一个子无序列表（ul）。 3. 在子无序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值