HTML中水平二级菜单和垂直二级菜单的设计

已于 2024-02-28 09:42:28 修改
阅读量4.5k 收藏 28
点赞数 2
文章标签： 前端 css html 水平二级菜单 垂直二级菜单 设计 菜单
于 2022-03-22 20:32:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48273925/article/details/123667144
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{ /*知道了盒子宽度垂直居中*/
            position: absolute;
            left: 50%;/*绝对定位下盒子最左边距离屏幕左边50%*/
            top: 50%;
            margin-left: -300px;/*盒子总宽600px，为此左外边距右移300px即可居中*/
            margin-top: -250px;
        }
        div>ul>li{
            float:left;/*使用组合选择器定位到第一级ul下一级的li，使其左浮动*/
        }
        li{
             list-style: none;/*所有的项目都取消标记*/
         }
        li>ul{
            display: none;/*使用组合选择器定位到li下一级的ul，使其隐藏*/
        }
        li:hover ul{/*使用伪类选择器设置悬停在li上面时显示ul*/
            display: block;
        }
        a {
            text-decoration: none;
            display: block;
            width: 120px;
            font-size: 20px;
            text-align: center;
            color:cornflowerblue;
        }
        a:hover {/*使用伪类选择器设置悬停在a上面时修改a的显示样式*/
            background-color:black;
            color:papayawhip;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="#">首页</a>
            <ul>
                <li><a href="#">2级菜单</a></li><!--li标签内包含a标签，属于块级元素，为此会自动换行-->
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
        <li><a href="">姓名</a>
            <ul>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
        <li><a href="">学号</a>
            <ul>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
        <li><a href="">班级</a>
            <ul>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
        <li><a href="">获奖状况</a>
            <ul>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{/*知道了盒子宽度垂直居中*/
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -60px;
            margin-top: -250px;
        }
        li {
            position: relative;/*使li标签全部相对定位*/
            list-style: none;/*所有的li都取消标记*/
        }
        li>ul {
            display: none;
            position: absolute;/*父类是相对定位的绝对定位*/
            left: 100%;/*ul右移100%*/
            top: 0;/*高度和父类一样*/
        }
        li:hover ul {/*使用伪类选择器设置悬停在li上面时显示ul*/
            display: block;
        }
        a {
            text-decoration: none;
            display: block;
            width: 120px;
            font-size: 20px;
            text-align: center;
            color:green;
        }
        a:hover {/*使用伪类选择器设置悬停在a上面时修改a的显示样式*/
            background-color:black;
            color:papayawhip;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="#">首页</a>
            <ul>
                <li><a href="#">2级菜单</a></li><!--li标签内包含a标签，属于块级元素，为此会自动换行-->
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
        <li><a href="">姓名</a>
            <ul>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
        <li><a href="">学号</a>
            <ul>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
        <li><a href="">班级</a>
            <ul>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
        <li><a href="">获奖状况</a>
            <ul>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
                <li><a href="#">2级菜单</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

不要随地大便
关注
  • 2
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页
ormstq的博客
01-17 3180
横向二级导航菜单 Web页面设计实例
python制作二级菜单_python之tkinter使用-二级菜单
weixin_39875805的博客
11-26 1791
# 菜单功能说明：二级菜单import tkinter as tkfrom tkinter import messageboxroot = tk.Tk()root.title('菜单选择')root.geometry('200x160') # 设置窗口大小def file_fn():label['text'] = '选择了文件的二级菜单！'label.config(fg='red')def se...
HTML+CSS、Vue+less+、HTML+less 组件封装实现二级菜单切换样式跑（含全部代码）
可可的博客
11-09 1091
ps:vscode中less自动编译成css。4.重启vscode。
HTML垂直二级菜单的设计与实现
2301_77335001的博客
05-27 313
【代码】HTML垂直二级菜单的设计与实现。
html、css 实现二级菜单
Zhangguohao666的博客
12-11 7724
利用html、css 实现二级菜单，一级菜单用浮动，二级菜单用定位
页面左侧二级菜单20种案例
otatoz
02-15 1万+
本文由码农网&amp;nbsp;– 小峰原创，转载请看清文末的转载要求，欢迎参与我们的付费投稿计划！ jQuery作为一款主流的JavaScript前端开发框架，深受广告开发者的亲睐，同时jQuery有着不计其数的插件，特别是菜单插件更为丰富，本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单，这些侧边栏菜单可以用在不同风格的网页上，如...
HTML导航栏二级菜单（垂直、水平方向）
weixin_48591974的博客
09-12 4436
二级菜单是指主菜单的子菜单。菜单栏实际是一种树型结构，子菜单是菜单栏的一个分支。简单分享主要的垂直和水平方向的CSS设计。
Vue3+ElementPlus 根据路由 自动创建二级菜单
哈
04-26 4099
最终效果 路由index.ts import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router' import Index from '../views/Index.vue' import Login from '../views/Login.vue' import Layout from "../views/Layout/Layout.vue" const routes: Array<RouteRecord
三种方式实现网页二级菜单
热门推荐
Bazingaea的博客
11-28 6万+
方法一：使用HTML和CSS实现   首先是Html代码，习惯上会将菜单放在一个div里，使用盒子模型，方便以后的操作和设置样式。 二级菜单也就是在一级菜单中的li中再添加一个ul-li结构   &lt;div class="test"&gt; &lt;ul&gt; &lt;li&gt;A&lt;/li&gt; &lt;li&gt;B&lt..
html 中怎么写二级导航,HTML+CSS实现二级导航
weixin_39613951的博客
05-30 1434
一. 简单的说就是列表里面再嵌套一个列表：HTML教程辉辉傻逼 辉辉傻逼 辉辉傻逼 二. css样式设置应由外向内设置样式。先介绍几种样式：display:block:表示元素显示为行级元素，独占一行。可设置元素的宽度和高度。display:inline-block:表示元素显示为内联行级元素，既可并排显示，也可设置元素的宽度和高度。font:14px/20px arial;表示字体大小为1...
vue实现鼠标移过出现下拉二级菜单功能
10-15
在 Vue 中实现鼠标移过出现下拉二级菜单的功能，可以通过结合 Vue 的响应式系统、条件渲染（v-if 或 v-show）以及 CSS 过渡动画来实现。下面我们将详细探讨如何实现这一功能。 首先，Vue 提供了 `transition` 组件...
jQuery手机垂直二级菜单切换
11-03
在移动设备上，为了优化用户体验，常常需要设计适应小屏幕的导航菜单，这就是所谓的手机垂直二级菜单。在本文中，我们将深入探讨如何使用jQuery来实现这样的功能，特别关注其在移动环境下的应用。 首先，jQuery是一...
jquery垂直渐变弹出二级导航菜单
06-05
"jQuery垂直渐变弹出二级导航菜单"是一个专门针对这种需求的技术实现，它结合了jQuery库的强大功能，使得二级菜单在鼠标悬停时能以平滑的渐变效果展开，提供用户友好的交互体验。 jQuery是一个广泛使用的JavaScript...
js实现横向弹出二级菜单
06-05
通过以上步骤，我们就成功地用JavaScript实现了一个横向弹出的二级菜单，并且具有良好的用户体验和响应式设计。在实际项目中，还可以根据需求进一步优化，比如添加过渡动画、防抖处理等，以提高性能和用户体验。
jQuery左侧垂直四级导航菜单特效
04-02
jQuery左侧垂直四级导航菜单特效是一款Win8风格左侧垂直四级导航菜单网页特效，采用字体图标，鼠标滑过右侧弹出二级。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 426
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 215
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 278
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
如何设置垂直导航栏的二级菜单，使得其是水平分布的
06-13
要设置垂直导航栏的二级菜单水平分布，可以采用以下步骤： 1. 在 HTML 中创建一个垂直导航栏，并在其中添加二级菜单的链接。 2. 在 CSS 中设置垂直导航栏的样式，包括宽度、高度、背景颜色等。 3. 设置二级菜单的样式，包括宽度、高度、位置、显示方式等，使其在垂直导航栏的右侧水平分布。 4. 使用 CSS 中的:hover 选择器，设置鼠标悬停在主菜单上时，显示二级菜单。 下面是一个示例代码： HTML： ``` <nav> <ul> <li><a href="#">主菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">主菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> </ul> </nav> ``` CSS： ``` nav{ width: 200px; background-color: #ccc; } ul{ list-style: none; margin: 0; padding: 0; } li{ padding: 10px; border-bottom: 1px solid #fff; position: relative; } li:hover ul{ display: block; } ul ul{ display: none; position: absolute; top: 0; left: 200px; width: 200px; background-color: #eee; } ul ul li{ border-bottom: none; padding: 5px; text-align: center; } ul ul li:last-child{ border-bottom: 1px solid #ccc; } ``` 上述代码中，设置了一个宽度为200px的垂直导航栏，并在其中添加了两个主菜单，每个主菜单下面有三个子菜单。使用CSS设置了主菜单和子菜单的样式，并使用:hover选择器，设置鼠标悬停在主菜单上时，显示其对应的子菜单。子菜单采用绝对定位，设置其在垂直导航栏的右侧水平分布。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不要随地大便

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值