网页二级菜单栏的几种做法

最新推荐文章于 2024-05-27 17:27:19 发布
最新推荐文章于 2024-05-27 17:27:19 发布
阅读量8.1k 收藏 134
点赞数 18
分类专栏： # html+css 文章标签： css html 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42590083/article/details/110147272
版权

在这里插入图片描述

网页二级菜单栏的第一种做法，纯css

第一种：纯css的写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单的第一种做方法</title>
    <style>
        *{margin:0;padding: 0;}
        a{text-decoration: none;color: darkgray;}
        ul li{list-style: none;}
        .box{
            width: 540px;
            height: 50px;
            background: #444;
            margin: 0 auto;
        }
        .box ul li{float: left;}
        .box ul li a{
            
            width: 90px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            display: inline-block;
        }
        .box ul li a:hover{
            color: #fff;
            background: coral;
        }
        .box2 {
            width:90px;
            position: absolute;
            display:none;
            background: rgb(205, 195, 50);
            color: rgb(206, 25, 25);

        }
       
            .box  li:hover .box2{
              display: block;
                
        } 
        /*为什么 不能  直接 .box2:hover?*/
        .box li :hover a{
            background: #fff;
                color: black;

        }
        /* 这种不行 可能是权重太低
        .box2 :hover{
            display: block;
        } */
        
    </style>
</head>
<body>
        <div class="box">
            <ul>
                <!-- a是内联元素 不能嵌套块元素 -->
                <li><a href="#">产品介绍</a>
                    <ul class="box2" >
                        <li><a href="#">产品一</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 class="box2">
                        <li><a href="#">服务一</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 class="box2">
                        <li><a href="#">成功案例一</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 hrf="#">关于我们</a>
                    <ul class="box2">
                        <li><a href="#">关于我们一</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 class="box2">
                        <li><a href="#">在线演示一</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 class="box2">
                        <li><a href="#">联系我们一</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>

效果如图所示：
在这里插入图片描述

等待的L先生
关注
  • 18
    点赞
  • 踩
  • 134
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html js 左侧二级菜单,横向二级导航菜单(html+css+js)
weixin_42522552的博客
05-31 1317
/*基本信息*/body{margin: 0;padding: 0;background: #FFFFFF;}/*导航*/#navigation{font: 12px bolder "Lucida Grande" ,​Helvetica,​Arial,​Verdana,​sans-serif; /* 设置文字大小和字体样式 */height: 32px;background: #999999;}....
web前端设计--二级菜单栏
qq_59795720的博客
05-21 1015
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
html实现好看的多种风格导航菜单(源码)
06-29
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。 效果演示介绍地址： https://blog.csdn.net/weixin_43151418/article/details/131412565
【html+css（大作业）】二级菜单导航栏
最新发布
2301_79982543的博客
05-27 1278
hello，hello好久不见！
html、css 实现二级菜单
Zhangguohao666的博客
12-11 7740
利用html、css 实现二级菜单，一级菜单用浮动，二级菜单用定位
html简单下拉二级菜单
君临天下的博客
06-21 7581
在实际网页中经常能看到二级菜单的使用，如下图所示， 鼠标移动到相应位置菜单栏才会有响应 具体实现代码如下（仅供参考）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉二级菜单</title> <!--这是一段注释--> <style type="text/css"> /*初始化
HTML导航栏二级菜单（垂直、水平方向）
weixin_48591974的博客
09-12 4489
二级菜单是指主菜单的子菜单。菜单栏实际是一种树型结构，子菜单是菜单栏的一个分支。简单分享主要的垂直和水平方向的CSS设计。
html中二级菜单以及主页的实现，HTML+css
weixin_63478784的博客
02-14 4202
t图书管理系统中使用HTML+css实现的二级菜单以及首页，也有float属性
HTML+CSS制作二级菜单栏
热门推荐
孙婷婷的博客
12-24 2万+
今天我们来练习一下二级菜单栏，说实话比较简单，但是自己一个人写的时候错误百出，逻辑混乱，于是乎网上找了几个案例，借鉴了一下思路，才整明白，鄙人确实不才，哈哈！ 效果图附上： 首先：我已链接了外部样式重置，所以无需自己亲自写： reset.css网上有很多，我用的是下面这个，免费分享给大家，永久有效哦！ 链接：https://pan.baidu.com/s/1doPA17vy--Qt...
jQuery响应式侧滑二级菜单栏.zip
07-04
【jQuery响应式侧滑二级菜单栏】是一种常见的网页交互设计，它利用JavaScript库jQuery、CSS3和HTML5技术，为用户提供了一种优雅的导航菜单解决方案。这种菜单在小屏幕设备上尤其适用，因为它可以节省空间，同时保持...
纯CSS实现鼠标滑过显示子菜单的二级菜单效果
09-24
在Web开发中，使用纯CSS技术实现具有交互性的二级菜单是一个非常实用的技能。通过CSS的伪类:hover，开发者可以创建一个鼠标悬停时显示子菜单的效果，这个效果在用户体验设计中非常常见。现在我们来详细解析这个知识...
jquery左侧固定悬浮二级菜单
04-02
"jQuery左侧固定悬浮二级菜单"是一种高效且用户友好的导航解决方案，尤其适用于内容丰富的网站，如电子商务平台、企业官网等。这个菜单设计允许主菜单固定在左侧，二级菜单则根据用户的滚动动态显示，提供无缝的浏览...
jquery二级下拉菜单导航代码12
06-05
在"jquery二级下拉菜单导航代码12"中，我们可以期待以下几个关键知识点： 1. **DOM选择器**：`jQuery`提供了丰富的选择器来选取HTML元素，如`id`选择器（`#id`）、类选择器（`.class`）和祖先/后代选择器等。在这个...
jquery实现向下滑出的二级导航下滑菜单效果
10-23
在前端开发过程中，菜单效果的实现是界面设计中的一项基本技能，而二级菜单作为导航栏中常见的组成部分，如何实现其展开和收起的动画效果，对于提升用户体验有着重要意义。 本知识点中，首先介绍了二级导航菜单的...
HTML+ CSS来实现一个简单的二级菜单栏
qq_40992225的博客
09-20 6266
3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。1.首先，我们先创建一级菜单。
【Web前端HTML+CSS基础——定位(二级菜单，弹出层和轮播图的应用)】
weixin_64993156的博客
02-25 2837
四个属性值同时设置会产生矛盾，开发时尽量避免，默认情况，一般左右冲突的时候以左为主，一般上下冲突以上为主。一个元素，只要position的取值不是static,认为该元素就是一个定位元素。z-index可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖。绝对定位和固定定位中，margin为auto的时候，会自动吸收剩余空间。包含块不一样，绝对定位的包含块怎么找的，相对定位的包含块怎么找的。设置z-index，通常情况下，该值越大，越靠近用户。包含块的不同：固定为视口(浏览器的可视窗口)
导航栏以及二级菜单栏（下拉列表）的制作
weixin_74835614的博客
11-30 1万+
作为新手小白，在我们熟悉了HTML , CSS，JS的功能和语法之后，Web前端开发中，更重要的还有界面的美化，主要依据CSS的庞大功能来实现，今天我来给大家分享的是，利用html代码来实现横向导航栏以及下拉菜单列表的实现。首先，用和标签将导航栏的布局搭建出来（此时的一级导航栏还是纵向的位置，如何拉至横向需要CSS部分的辅助，下面CSS部分会提到），代码中的"登录","注册","留言","我的"为导航栏的标签部分，搭建二级菜单栏的代码位置，类似于“嵌套”
HTML中水平二级菜单和垂直二级菜单的设计
你们瞎搞
03-22 4580
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style> * { margin: 0; padding: 0; } div{ /*知道了盒子宽度垂直居中*/ ...
＜CSS＞一级导航栏和二级导航栏
Snowyufly的博客
07-18 1万+
二级导航栏的制作
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值