HTML5制作二级菜单（主菜单的子菜单）

一、HTML文件代码
二、 CSS文件代码
三、效果图

一、HTML文件代码

<!--submenu.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="css/style.css"><title>Title</title>
</head>
<body><div><ul  class="menu"><li><a href="">一级菜单</a><ul><li><a href="">二级菜单1</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li></ul></li><li><a href="">一级菜单</a><ul><li><a href="">二级菜单2</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li></ul></li><li><a href="">一级菜单</a><ul><li><a href="">二级菜单3</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li><li><a href="">二级菜单</a></li></ul></li></ul></div>
</body>
</html>

二、 CSS文件代码

/***submenu.css***/
*{margin: 0;   /*非重点*/padding: 0;  /*非重点*/
}li{list-style: none;
}.submenu ul li{width: 120px;       /*非重点*/font-size: 18px;    /*非重点*/height: 40px;     /*非重点*/line-height: 40px;  /*非重点*/background: #DEB887;/*非重点*/position: relative; /*重点*/}/*****重点*******/
.submenu ul li ul{display: none;position: absolute;left: 120px;top:0;}
/******重点*******/.submenu ul li a{display: block;/******重点*******/
}.submenu ul li:hover ul{display: block;/******重点*******/
}

三、效果图

HTML5制作二级菜单（主菜单的子菜单）相关推荐

php在菜单栏里加子菜单,WordPress后台添加子菜单add_submenu_page()
接上文:WordPress后台添加顶级菜单add_menu_page(),今儿再分享一下在 wordpress 后台侧边栏添加子菜单的方法,用到的函数是:add_submenu_page() 函数用法 ...
导航菜单（移动出现子菜单）
代码例如以下: <!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv=&q ...
c语言子菜单退出返回主菜单,毕业论文_图书管理系统设计报告077喜欢就下吧（范文1）...
<毕业论文:图书管理系统设计报告07.doc>由会员分享,可免费在线阅读全文,更多与<毕业论文_图书管理系统设计报告07(7)(喜欢就下吧)>相关文档资源请在帮帮文库(www. ...
鼠标移动事件（鼠标移动到主菜单上显示子菜单）
mouseenter():当鼠标指针穿过元素时,会发生 mouseenter 事件.与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.如果鼠标指针穿 ...
Android菜单：选项菜单+上下文菜单+子菜单
菜单是人机交互的重要接口,在 Android SDK 中,提供了菜单类 android.view.Menu,以完成与菜单有关的操作. Android SDK 提供三种菜单,分别如下. 1)Option ...
javaFX学习之Menu下创建子菜单及菜单项的例子
使用RadioMenuItem来创建子菜单的菜单项.将RadioMenuItem类型菜单项添加到ToggleGroup(互斥切换组)类型对象中,使各个RadioMenuItem类型菜单项的选中是相互排 ...
Electron中实现菜单、子菜单、以及自带操作事件
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
选项菜单和子菜单(SubMenu)
/* * 选项菜单和子菜单(SubMenu) * 添加菜单和子菜单的步骤如下: * 1.重写Activity哦onCreateOptionsMenu(Menu menu)的方法, * 在该 ...
[wxWidgets]XRC和动态子菜单
1. 什么是XRC XRC是基于XML的资源系统.它的基本出发点是将界面布局和程序逻辑分离,即将界面布局代码保存在分离的XML文件中,在程序中不涉及控件的创建和布局,只需要加载相应的资源并处理事件绑定 ...

HTML5制作二级菜单（主菜单的子菜单）

HTML5制作二级菜单（主菜单的子菜单）

一、HTML文件代码

二、 CSS文件代码

三、效果图

HTML5制作二级菜单（主菜单的子菜单）相关推荐

最新文章

热门文章