二级菜单–竖排

这是作为回顾之前学习的东西
大家也可以康康作为一种回顾
二级菜单 —竖排
不足的地方请大家指出来
代码照常都有详细解释

效果图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>二级菜单 竖</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/secondaryMenu.css">
</head>
<body ><div class="main"><!-- 设置一个主体框架 --><!--这个HTML代码就是在ul里面放置li 和  ul  标签 这个大家简单看一下就明白啦--><ul><li> <a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a></li></ul></li><li><a href="#">一级菜单</a><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li><a href="#">一级菜单</a><ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li></ul></div>
</body>
</html>

下面是css代码

body{font-size: 14px;color: black;background-color: #ccc;font-family: Arial, Helvetica, sans-serif,"微软雅黑";line-height: 1.5;
}
<!-- 这里是给整个网页设置一些属性  字体大小  背景颜色   字体颜色   还有字体  行高等   都设为全局的啦 -->
a{color: #00a1d6;text-align: center;
}
<!-- 这里就是给全局的  a 标签设置一些样式 -->.main{width: 220px;border: 1px solid #eee;margin: 10px auto;box-sizing: border-box;
}
<!-- 上面是给那个主要的div设置样式  定宽  设置边框等   让它居中等 -->.main ul li{border: 1px solid #eee;line-height: 50px;height: 50px;<!-- 这里就是居中的意思  行高和高度相等 -->background-color:#fff;position: relative;text-align: center;<!-- 文本居中 -->box-sizing: border-box;
}
.main ul li ul{display: none;<!-- 这里是隐藏的意思   -->position: absolute;left: 218px;top: -3px;width: 120px;height: 50px;border: 1px solid #ccc;box-sizing: border-box;
}.main li:hover{background-color: #008c8c;
}.main ul li:hover ul{display: block;border-right:none ;
}<!-- 这是hover样式  鼠标移上去的样式 -->

这里是用来作为一个简单的回顾就没有写的特别详细有哪里不明白的话都可以在评论区讲出来
重置代码的话在我另外一篇博客上大家的要是不一样的话可以去看一下。
谢谢啦

二级菜单--竖排---HTML相关推荐

[j2me]类似于OperaMini二级菜单界面演练[1]
拜朋友所赐,今日开始尝试如何绘制类似于Opera Mini的二级菜单,如下图所示: 我自己的练习,还很幼稚,姑且记录如下: 点击左软键,即可选中界面左下角的"选择"命令,二级菜 ...
php微信级联菜单,php微信公众号开发之二级菜单
本文实例为大家分享了php微信公众号二级菜单的具体代码,供大家参考,具体内容如下核心代码: $postObj = simplexml_load_string($postStr, 'SimpleXML ...
html二级菜单的自动宽度,如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose
New Document 首页新闻国际新闻国内新闻体育新闻财经股票市场证券行情基金保险联系我们回复讨论(解决方案) .menu li ul a{ display:block; font ...
python制作二级菜单_python实现二级登陆菜单及安装过程
python实现二级登陆菜单的代码如下所示: """ 1.三级菜单注册登陆注销 2.进入每一个一级菜单,都会有下一级的菜单 """ u ...
jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果
html: <div class="col-sm-3 col-md-2 sidebar"><div class="totalt">< ...
dedecms二级菜单中判断子菜单标签的方法
这篇文章将为大家详细讲解有关dedecms二级菜单中判断子菜单标签的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获. 虚拟接口是用户本地数据中心通过海外专线访问V ...
document操作例题1-延迟注册与二级菜单
一.倒计时10秒后可以注册 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http ...
关于expanded一级二级菜单数据的分组排序
最新再弄关于expandedlistview相关的东西,所以需求是需要对一级菜单根据时间排序,同时二级菜单也需要根据时间排序,距离现在最近的时间显示在最前面. 效果就是如下: --group2 -- ...
css二级菜单的隐藏与显示_具有二级菜单的导航案例
下图为具有二级菜单的导航效果,鼠标悬浮在"服装"菜单时出现如图所示的二级菜单效果. 鼠标悬浮于二级菜单效果如下图所示: 注:鼠标悬浮于菜单时,二级菜单背景颜色为渐变,渐变颜色值为# ...

二级菜单--竖排---HTML

二级菜单–竖排

二级菜单--竖排---HTML相关推荐

最新文章

热门文章