css实现二级菜单_一二级菜单

css实现二级菜单_一二级菜单CSS中hover出现二级菜单

大家好,又见面了,我是你们的朋友全栈君。

在绝大多数中,都会用到二级菜单实现的效果也各有不同,有的是用js实现的,也有用css实现的,我之前做了个比较简单的二级菜单,效果如下图所示:

css实现二级菜单_一二级菜单

首先由于元素比较少,我就把全部的外边距和内填充设置为了.

一级菜单浮动到左边使得水平排列,同时对一级菜单进行相对定位,二级菜单设置绝对定位,绝对定位是相对其父元素的.

下面看一下具体的代码:

HTML:

 1 <div>
 2     <ul class="first">
 3         <li class="menu">我是一级菜单
 4             <ul class="second">
 5                 <li>我是二级菜单</li>
 6                 <li>我是二级菜单</li>
 7                 <li>我是二级菜单</li>
 8             </ul>
 9         </li>
10         <li>我是一级菜单</li>
11         <li>我是一级菜单</li>
12         <li>我是一级菜单</li>
13         <li>我是一级菜单</li>
14     </ul>
15 </div>

 

下面是css的样式:

 1 <style>
 2     *{
    
    
 3         margin: 0px;
 4         padding: 0px;
 5     }
 6     div{
    
    
 7         margin:8px;
 8     }
 9     li{
    
    
10         list-style: none;
11         cursor: pointer;
12     }
13     .first{
    
    
14         position: relative;
15     }
16     .first>li{
    
    
17         float: left;
18         display: block;
19         background-color: skyblue;
20         margin-right: 8px;
21         padding: 8px;
22         }
23     .first>li:hover{
    
    
24         background-color: cyan;
25     }
26     .second{
    
    
27         position: absolute;
28         left: 0px;
29         margin-top: 8px;
30         display: none;
31     }
32     .second>li{
    
    
33         display: block;
34         background-color: skyblue;
35         padding: 8px;
36     }
37     .menu:hover .second{
    
    
38         display: block;
39         background-color: cyan;
40     }
41     .second>li:hover{
    
    
42         background-color: cyan;
43     }
44 </style>

这只是一种比较简单的二级菜单的实现方法,如果有可以优化的地方,欢迎评论.

转载于:https://www.cnblogs.com/fei-H/p/10944827.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106795.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java 大数据学习路线图

    java 大数据学习路线图学习路线图大数据Java

  • ETL是什么_ETL平台

    ETL是什么_ETL平台一、ETL发展的背景信息是现代企业的重要资源,是企业运用科学管理、决策分析的基础。据统计,数据量每经过2-3年时间就会成倍增长,这些数据蕴含着巨大的商业价值,而企业所关注的通常只占总数据量的2%~4

  • postman汉化版下载_postcrossing中文版

    postman汉化版下载_postcrossing中文版postman汉化版下载之后直接解压使用或者替换对应版本下的resources/app.asar重要提醒:不要更新下载地址:链接:https://share.weiyun.com/0TFvHgOq密码:<atitle=”o35jeq”>&nbsp;&nbsp;</a>…

  • Pycharm及python安装详细教程

    Pycharm及python安装详细教程首先我们来安装python1、首先进入网站下载:点击打开链接(或自己输入网址https://www.python.org/downloads/),进入之后如下图,选择图中红色圈中区域进行下载。2、下载完成后如下图所示3、双击exe文件进行安装,如下图,并按照圈中区域进行设置,切记要勾选打钩的框,然后再点击Customizeinstall

  • xiao776php,《xiao 776》_xiao 776_NEWS下载网「建议收藏」

    xiao776php,《xiao 776》_xiao 776_NEWS下载网「建议收藏」康平候爷一五一十述说了一遍,因是夏钰之伤在腿上,这段时日无法下榻,他自己已然焦躁得不行。xiao776因此,趋向正常性(normality)的倾向是一种格局的倾向,而格局里面的自我和物体则受制于格局以及格局与其内容的不变联结,这里的内容意指物体和自我。面对阻在他身前的最后一队死士,他疯了一般,浑身爆发出森然的杀意,弯刀过处全是一片飞扬的血肉,守卫渐渐抵挡不住,废宫越来越在眼前。提示:xiao7…

  • 史上超强最常用SQL语句大全

    史上超强最常用SQL语句大全史上超强最常用SQL语句大全,)1)DDL–数据定义语言用来定义数据库对象:数据库,表,列等。关键字:create,drop,alter等2)DML–数据操作语言用来对数据库中表的数据进行增删改。关键字:insert,delete,update等3)DQL–数据查询语言用来查询数据库中表的记录(数据)。关键字:selewhere等4)DCL–数据控制语言用来定义数据库的访问权限和安全级别,及创建用户。关键字:GRANT,REVOKE等

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号