下拉菜单（二级菜单）

怎么用HTML+CSS代码写一个下拉菜单（二级菜单）：

这是原始的样子：

鼠标移动到上面二级菜单显示

鼠标移动到二级菜单上：

HTML代码：
<li class="list-inline-item menuDiv"><a href="#" class="menuA">菜单一</a><ul class="menuUL"><li class="menuLI"><a href="#">二级菜单</a></li><li class="menuLI"><a href="#">二级菜单</a></li><li class="menuLI"><a href="#">二级菜单</a></li></ul>
</li>CSS样式：/*设置盒子的样式*/.menuDiv {border: 2px solid #808080;overflow: hidden;width: 100px;line-height: 40px;color: black;background-color: #EEF5F9;text-align: center;display: block;}/*隐藏二级菜单*/.menuUL {position: absolute;display: none;}/*鼠标移到盒子，显示二级菜单*/.menuDiv:hover ul {display: block;}/*盒子伪类样式*/.menuDiv:hover {color: #ff0000;background-color: #6f7fe2;}/*二级菜单样式*/.menuLI {width: 100px;line-height: 36px;color: #456;background-color: #eff;text-align: center;border: 1px solid #ccc;border-top: none;display: block;}/*二级菜单伪类*/.menuLI:hover {color: #ff0000;background-color: #6f7fe2;}

下拉菜单（二级菜单）相关推荐

HTML下拉框二级菜单
一.form表单 <div><form><div><select>//默认项为第一个<option>广州 ...
实现类似美团的下拉分级式菜单
最近要实现如下的下拉式二级目录效果: 思路很简单,左右二级目录其实就是两个UITableView,点击左边cell实现右边table刷新. 关键代码如下: 初始化变量: NSInteger _left ...
怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)...
(一).说明功能类似Windows 操作系统自带的记事本. 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开保存对话框等控件用法以及记事本菜单事件的具体代码) (二).图片示例 (三) ...
excel不能插入activex控件_用excel做下拉多选菜单
先看视频: 下拉多选菜单https://www.zhihu.com/video/1070640311239249920 在日常工作中,有时候我们需要在单元格中输入多个固定内容的某几个项,手动输入很麻烦 ...
select下拉框二级联动
采用Layui框架两种方法实现,差别不大一.编写jsp代码二.编写后台代码(方法一) 2.1 工具类 2.2 dao层 2.3 编写对应xml 2.4 service层 2.5 serviceI ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
vue下拉el-select二级联动
vue下拉el-select二级联动 <el-selectv-model="departmentid"placeholder="请选择部门"@change ...
[LayUI]下拉框二级联动
下拉框二级联动在某些应用场景我们需要用到下拉选择框联动情形. HTML: <label class="layui-form-label">公司</label&g ...
popwindow下拉筛选二级联动_职场人必备！一分钟搞定Excel二级联动下拉菜单
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...

下拉菜单（二级菜单）

下拉菜单（二级菜单）相关推荐

最新文章

热门文章