二级导航条---竖直

最新推荐文章于 2024-05-27 17:27:19 发布
最新推荐文章于 2024-05-27 17:27:19 发布
阅读量1.6k 收藏 3
点赞数
文章标签： 导航条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wutrg1502/article/details/79162537
版权
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作二级导航菜单</title>
<!-- <link rel="stylesheet"  href="C:\Users\zhaodada\Desktop\js\style1.css"> -->
<style type="text/css">
#menu{
width: 100px;
border: 1px solid #999;


}
#menu ul{
margin:0px;
padding: 0px;
list-style:none; 
}
#menu ul li{
background:#06c;
height:26px;
line-height:26px;
text-align:center;
border-bottom:1px solid #999;
position: relative;
}
a{
display:block;
font-size:13px;
color: #fff;
text-decoration:none;
}
a:hover{
color:#f00;
font-size:14px;
}
/*创建二级菜单*/
#menu ul li ul{
display: none;
top: 0px;
width: 130px;
border: 1px solid #ccc;
border-bottom: none;
position: absolute;
left: 100px;
}
#menu ul li:hover ul{
display: block;
}
#menu ul li :hover ul li a{
display: block;
}


</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a>
<ul>
<li><a href="">Selector</a></li>
<li><a href="">Use CSS File in HTML</a></li>
<li><a href="">Formatting Document</a></li>
<li><a href="">Layout</a></li>
</ul>
</li>
<li><a href="">JavaScript</a></li>
<li><a href="">XML</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Ajax</a></li>
</ul>
</div>
</body>

</html>



冬天下雪啦
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element组件--Navigation导航
weixin_45343878的博客
08-08 804
NavMenu 导航菜单 Tabs 标签页 Breadcrumb 面包屑 PageHeader 页头 Dropdown 下拉菜单 Steps 步骤条 NavMenu 导航菜单 为网站提供导航功能的菜单。 顶栏 适用广泛的基础用法。 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-co...
lego-loam阅读理解笔记 一
qingdu007的专栏
08-28 1388
前言 论文：https://ieeexplore.ieee.org/abstract/document/8594299 ego-loam源码地址：https://github.com/RobustFieldAutonomyLab/LeGO-LOAM 文章原理讲解除了看论文，看看这些博客： LeGO-LOAM:轻量级地面优化的建图 其他博客代码理解推荐：https://blog.csdn.net/orange_littlegirl/article/details/95238586 安装编译...
html如何把二级菜单竖放,CSS实现带滚动条的二级竖直菜单
weixin_39947522的博客
06-17 865
CSS实现带滚动条的二级竖直菜单.menu{font-family: verdana, arial, sans-serif; width:500px; padding:20px 0 100px 100px; position:relative;z-index:100;}.menu ul{padding:0; margin:0; list-style-type: none; border:0;}.m...
【html+css（大作业）】二级菜单导航栏
2301_79982543的博客
05-27 1232
hello，hello好久不见！
jQuery实现二级侧边导航菜单
ovocc的博客
03-21 1791
案例向
二级水平导航菜单栏的实现
binhyun的博客
03-06 827
导航栏设置
记忆力-英二
丘色果
04-11 4484
第 1 章 熟词僻义 —— 熟词僻义 ============================================================================================================ box [bɑːks] n.盒;箱;匣; v.(拳击运动)击打(某人);把(某物)装箱(或盒、匣) He boxes the waiter in the box. 他在包厢里出拳打了那个服务员。 se.
React-Native中一些组件的用法(二)
黎默的博客
04-22 392
本文为大家介绍一下React-Native中一些深入些的组件，由于对ES6的语法并没有完全掌握，这里暂时用ES5和ES6混用的语法。
软工第二次博客作业-软件案例分析
weixin_51932821的博客
03-05 191
可复现性：大概率发生，只要对应知识点有大于一道练习题时就会发生。具体复现步骤：进入技能树主页，点击左部某个知识点。具体情况描述：如下图，中部有三道练习题，每道练习题右侧对应一个图标。而靠上练习题的图标与其他题相比，存在明显的向左偏移。bug可能成因：顶部练习题与其它位置的练习题之间横向约束关系不一致。bug的严重性：🐛。不影响功能，但很影响逼格。bug改进建议：在前端统一所有练习题横向的几何约束关系。
SLAM学习笔记（十九）开源3D激光SLAM总结大全——Cartographer3D,LOAM,Lego-LOAM,LIO-SAM,LVI-SAM,Livox-LOAM的原理解析及区别
热门推荐
微鉴道长的博客
04-26 3万+
本文为我在浙江省北大信研院-智能计算中心-情感智能机器人实验室-科技委员会所做的一个分享汇报，现在我把它搬运到博客中。 由于参与分享汇报的同事有许多是做其他方向的机器人工程师（包括硬件、控制等各方面并不是专门做SLAM的工程师），加上汇报的内容较多，因此在分享中我尽量使用简介的口语，而不出现复杂的公式。所以本文面向的是3D-slam方向的初学者。内容在整理中参考了许多链接，将放在最后。 在文章结束后，我会把原PPT放在上面，需要者自取。 另外打个广告，在slam方向有实习意愿的，请发送简历至zkyy8
jQuery后台页面左侧竖直二级导航栏.zip
07-04
本资源"jQuery后台页面左侧竖直二级导航栏.zip"是针对网页开发中的一个常见需求——后台管理界面的侧边栏导航设计。这个压缩包包含了实现这一功能所需的文件和说明。 首先，我们要关注的是`jquery.1.3.1.js`，这是...
行业文档-设计装置-带竖直饰条的门体.zip
09-02
"行业文档-设计装置-带竖直饰条的门体.zip"这个压缩包文件聚焦于一种特定的门体设计风格，即带有竖直饰条的门。这种设计不仅涉及到美学，还涉及到结构力学、材料科学以及制造工艺等多个方面。 首先，竖直饰条的设计...
Android-VerticalSeekBar竖直滑动条用起来比较方便
08-13
在Android开发中，有时我们可能需要在用户界面上实现一种垂直方向上的滑动条，以适应特定的交互需求。这就是Android中的VerticalSeekBar控件发挥作用的地方。这个控件是HorizontalSeekBar的垂直版本，允许用户通过...
CSS简单竖直二级菜单.zip
05-24
在这个名为“CSS简单竖直二级菜单”的项目中，我们将探讨如何使用CSS来创建一个易于理解和实现的垂直二级菜单，特别适合初学者入门。 一、HTML结构基础 首先，我们需要构建HTML的基础结构。二级菜单通常由一级菜单...
【SCI顶级】金豺算法GJO-CNN-LSTM-Multihead-Attention温度预测【含源码 5741期】.zip
最新发布
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
2023睿抗机器人开发者大赛.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
【JCR一区级】飞蛾扑火算法MFO-CNN-LSTM-Attention故障诊断分类预测【含源码 5668期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
SCI一区】蚁狮算法ALO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5651.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
el-tabl竖直表头
10-12
el-table 是 Element UI 中的一个表格组件...如果要实现竖直方向的表头，可以使用 el-table-column 的 scoped-slot，并在其中使用 CSS transform 属性来实现旋转。具体实现方式可以参考 Element UI 官方文档中的示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值