css下拉菜单_css下拉菜单被下面的内容挡住了!! - CSDN
精华内容
参与话题
  • css实现下拉菜单(超详细)

    万次阅读 多人点赞 2018-09-26 22:05:39
    css写下拉菜单(超详细) ps:博主第一次发文章,不足之处还请指出 话不多说,直接进入正题吧 用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成,一般的关联结构都用它们) <ul class=&...

    纯css实现下拉菜单(超详细)

    ps:博主第一次发文章,不足之处还请指出
    话不多说,直接进入正题吧

    链接:
    纯css3实现下拉菜单

    1. ulli标签写一个关联结构(ulli的父子关系浑然天成,一般的关联结构都用它们)
    <ul class="nav">
        <a href="#">服装</a>
        <ul class="plat">
            <li><a href="#">衬衫</a></li>
            <li><a href="#">棉袄</a></li>
            <li><a href="#">裤衩</a></li>
        </ul>
    </ul>
    

    2.对界面进行初始化(万金油式开头)

          *{
                padding: 0;
                margin: 0;
            }
    

    3.给ula标签添加样式(这里大家可以自由发挥)

     ul,a{
                font-size: 20px;
                list-style: none;
                text-decoration: none;
                background-color: #3C3C3C;
                color: #FFFFFF;
                width: 100px;
                text-align: center;
                border: 0px solid black;
                border-radius: 5px;  /*圆角*/
                margin-top: 1px;
            }
            a{
                display: block;
            }
    

    4… 将.plat部分的内容隐藏起来

    .plat{
                display: none;
            }
    

    5.(重头戏来了) 对第一个a标签用:hover选择器;实现功能:当鼠标划过a标签时,隐藏部分内容可见

    .nav:hover .plat{
                display: block;
                clear: both;
            }
    

    6.至此功能已经实现,大家可以自己添加样式来优化用户体验
    例如:

    • 菜单栏横向排列:
    .nav{
                 float: left;
                 margin-left: 1px;
             }
    
    • 鼠标滑过栏目,提醒其位置
    `.plat li:hover>a{
                background-color: dimgrey;
            }`
    

    成品展示
    在这里插入图片描述
    总代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            ul,a{
                font-size: 20px;
                list-style: none;
                text-decoration: none;
                background-color: #3C3C3C;
                color: #FFFFFF;
                width: 100px;
                text-align: center;
                border: 0px solid black;
                border-radius: 5px;
                margin-top: 1px;
            }
            a{
                display: block;
            }
    
            .plat{
                display: none;
            }
            .nav{
                 float: left;
                 margin-left: 1px;
             }
            .nav:hover .plat{
                display: block;
                clear: both;
            }
            .plat li:hover>a{
                background-color: dimgrey;
            }
        </style>
    </head>
    <body>
    <ul class="nav">
        <a href="#">服装</a>
        <ul class="plat">
            <li><a href="#">衬衫</a></li>
            <li><a href="#">棉袄</a></li>
            <li><a href="#">裤衩</a></li>
        </ul>
    </ul>
    <ul class="nav">
        <a href="#">服装</a>
        <ul class="plat">
            <li><a href="#">衬衫</a></li>
            <li><a href="#">棉袄</a></li>
            <li><a href="#">裤衩</a></li>
        </ul>
    </ul>
    <ul class="nav">
        <a href="#">服装</a>
        <ul class="plat">
            <li><a href="#">衬衫</a></li>
            <li><a href="#">棉袄</a></li>
            <li><a href="#">裤衩</a></li>
        </ul>
    </ul>
    </body>
    </html>
    
    展开全文
  • css实现导航菜单下拉效果

    万次阅读 多人点赞 2018-06-13 11:37:17
    通过css也可以实现简单的导航栏效果,一些不会写js的下伙伴不用担心了。先上HTML部分 &lt;nav&gt; &lt;ul class="level"&gt; &lt;li&gt;&lt;a href=""&gt;...

    通过css也可以实现简单的导航栏效果,一些不会写js的下伙伴不用担心了。

    先上HTML部分

         <nav>
            <ul class="level">
                <li><a href="">首页</a></li>
                <li>
                    <a href="">栏目1</a>
                    <ul class="two">
                        <li>二级菜单1</li>
                        <li>二级菜单2</li>
                        <li>二级菜单3</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目2</a>
                    <ul class="two">
                        <li>二级菜单4</li>
                        <li>二级菜单5</li>
                        <li>二级菜单6</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目3</a>
                    <ul class="two">
                        <li>二级菜单7</li>
                        <li>二级菜单8</li>
                        <li>二级菜单9</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目4</a>
                    <ul class="two">
                        <li>二级菜单10</li>
                        <li>二级菜单11</li>
                        <li>二级菜单12</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目5</a>
                    <ul class="two">
                        <li>二级菜单13</li>
                        <li>二级菜单14</li>
                        <li>二级菜单15</li>
                    </ul>
                </li>
            </ul>
        </nav>
    效果如下图,现在什么样式也没有,我们需要对HTML进行一些样式上的调整让其看起来好看一下。

    现附上css:

    <style>
        *{padding: 0;margin: 0;}  /* 先重置一下html,消除HTML标签默认的内外边距 */
        .wrap{width: 800px;margin: 0 auto;}    /* 对导航的内容设置一个主体为800px的宽并使其居中 */
        .clear{clear: both;}  /* 清除浮动 */
        a{text-decoration-line: none;}   /* 去掉默认a标签的下划线 */
        ul,li{list-style: none;}
        nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;}
        nav .level>li a{color: black;}
        nav .level>li:hover{background: red;}   /* 设置鼠标滑过后的样式 */
    
        nav .two{display: none;}  /* 先使二级菜单的内容隐藏 */
        nav .level>li:hover .two{display: block;}   /* 鼠标滑过一级菜单后的显示二级菜单 */
    </style>
    如下图,现在导航栏已经有了一些大概的效果了,但是目前来看还是有一些不好看,我们还需要美观一下



    现在我们要写一下颜色变换和二级导航的样式,话不多说,直接附上代码

     nav .level>li{transition: .4s;}  /* 颜色添加过渡时间     未处理兼容性*/
     nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
     nav .two li:hover{background: pink;}

    效果如下图,现在我们已经实现了纯css实现导航栏下拉效果


    是不是很简单,有什么不懂的欢迎留言!

    最后附上全部的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>css实现简单的导航栏下拉</title>
    </head>
    <style>
        *{padding: 0;margin: 0;}  /* 先重置一下html,消除HTML标签默认的内外边距 */
        .wrap{width: 800px;margin: 0 auto;}    /* 对导航的内容设置一个主体为800px的宽并使其居中 */
        .clear{clear: both;}  /* 清除浮动 */
        a{text-decoration-line: none;}   /* 去掉默认a标签的下划线 */
        ul,li{list-style: none;}
        nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;transition: .4s;}
        nav .level>li a{color: black;}
        nav .level>li:hover{background: red;}   /* 设置鼠标滑过后的样式 */
    
        nav .two{display: none;margin-top: 10px;}  /* 先使二级菜单的内容隐藏 */
        nav .level>li:hover .two{display: block;}   /* 鼠标滑过一级菜单后的显示二级菜单 */
        nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
        nav .two li:hover{background: pink;}
    </style>
    <body>
        <nav>
            <div class="wrap">
                <ul class="level">
                    <li><a href="">首页</a></li>
                    <li>
                        <a href="">栏目1</a>
                        <ul class="two">
                            <li>二级菜单1</li>
                            <li>二级菜单2</li>
                            <li>二级菜单3</li>
                        </ul>
                    </li>
                    <li>
                        <a href="">栏目2</a>
                        <ul class="two">
                            <li>二级菜单4</li>
                            <li>二级菜单5</li>
                            <li>二级菜单6</li>
                        </ul>
                    </li>
                    <li>
                        <a href="">栏目3</a>
                        <ul class="two">
                            <li>二级菜单7</li>
                            <li>二级菜单8</li>
                            <li>二级菜单9</li>
                        </ul>
                    </li>
                    <li>
                        <a href="">栏目4</a>
                        <ul class="two">
                            <li>二级菜单10</li>
                            <li>二级菜单11</li>
                            <li>二级菜单12</li>
                        </ul>
                    </li>
                    <li>
                        <a href="">栏目5</a>
                        <ul class="two">
                            <li>二级菜单13</li>
                            <li>二级菜单14</li>
                            <li>二级菜单15</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </body>
    </html>


    展开全文
  • html+css简单下拉菜单制作

    万次阅读 2017-06-14 00:04:37
    额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧! 最终效果:

    额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧!

    最终效果:








































































    代码:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>DaoHang</title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		*{margin:0px; padding: 0px; }
    		#dh{
    			position: relative;
    			margin-top: 0px;
    			width: 400px;
    			height:40px;
    			border: 0px;
    			background-color: #0099CC;
    		}
    		#dh ul{
    			padding: 0px;
    			
    		}
    		a{
    			color: #FFF;
    			width: 100px;
    			height: 40px;
    			display: block;
    			text-decoration: none;
    			text-align: center;
    			line-height: 40px;
    			font-family: Microsoft Yahei;
    			font-weight: 2px;
    		}
    		#dh {
    			margin:0px auto; 
    		}
    		#dh ul li {
    			list-style: none;
    			float: left;
    		}
    		#dh ul li a:hover{
    			background-color: #6699FF;
    		}
    		#dh ul:hover{
    			display: block;
    		}
    		#dh ul li ul{
    			background-color: #0099CC;
    			position: absolute;
    			display: none;
    		}
    		#dh ul li ul li{
    			float: none;
    			background-color: #6688EE;
    			
    		}
    		#dh ul li ul li a{
    			font-size: 13px;
    			font-weight: 0px;
    		}
    		#dh ul li:hover ul{             /*二级菜单的触发点*/
    			display: block;
    		}
    	</style>
    </head>
    <body>
    	<div id="dh">
    		<ul>
    			<li><a href="#">首页</a></li>
    			<li><a href="#">课程内容</a>
    					<ul>
    						<li><a href="#">Java</a></li>
    						<li><a href="#">Javascript</a></li>
    						<li><a href="#">HTML</a></li>
    					</ul>
    				</li>
    			<li><a href="#">实验内容</a>
    					<ul>
    						<li><a href="#">Java试验1</a></li>
    						<li><a href="#">Java试验2</a></li>
    						<li><a href="#">Java试验3</a></li>
    					</ul>
    				</li>
    			<li><a href="#">关于我们</a>
    					<ul>
    						<li><a href="#">网站历史</a></li>
    						<li><a href="#">联系方式</a></li>
    					</ul>
    				</li>
    		</ul>
    	</div>
    </body>
    </html>


    展开全文
  • div+css下拉菜单效果实现

    千次阅读 2017-04-03 22:41:21
    这篇博客主要是如何用div+css去完成下拉菜单效果的简单教程,适合和我一样刚入门的小伙伴,下拉菜单效果在网上很多插件,而我在自己写一个之前用的是bootstrap的下拉菜单效果,首先讲一讲完成效果,这个主要是用在...

    第一次写博客,如有错误希望大家指出。

    这篇博客主要是如何用div+css去完成下拉菜单效果的简单教程,适合刚入门的小伙伴,下拉菜单效果在网上很多插件,而我在自己写一个之前用的是bootstrap的下拉菜单效果,首先讲一讲完成效果,这个主要是用在用户登录后,鼠标悬停在用户头像上时,会出现如图所示的下拉菜单 



    在bootstrap中,鼠标点击才会下拉菜单,我们在这里使用的html代码如下

    <div id="userDropDown">
    			<ul>
    			<li><a href="#">账户余额:<span id="accountBalance_display"></span></a></li>
    			<li><a href="#"><span class="glyphicon glyphicon-user"></span> 我的信息</a></li>
    			<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 我的订单</a></li>
    			<li><a href="#"><span class="glyphicon-paperclipglyphicon glyphicon glyphicon-heart-empty"></span> 我的收藏</a></li>
    			<li><a href="#"><span class="glyphicon-paperclipglyphicon glyphicon glyphicon-gift"></span> 我的优惠券</a></li>
    			<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> 退出</a></li>
    			</ul>
    </div>
    可以看到这里使用的主要结构还是无序列表,而字体图标使用了bootstrap中的Glyphicon Halflings的字体图标,下面为css样式部分
    #userDropDown {
    	display: none;
    	float: right;
    	margin-right: 300px;
    	width: 160px;
    	background-color: #ffffff;
    	border: 1px solid #EEEEEE;
    }
    
    #userDropDown ul {
    	padding: 0px;
    }
    
    #userDropDown ul li {
    	width: 160px;
    	height: 50px;
    	margin: 0px auto;
    	list-style: none;
    	padding-top: 15px;
    }
    
    #userDropDown ul li:first-child {
    	height: 80px;
    	background-color: #FFA800;
    }
    
    #userDropDown ul li:first-child>a {
    	padding-top: 16px;
    	display: inline-block;
    	width: 160px;
    	height: 80px;
    	color: white;
    	font-weight: bold;
    }
    
    #userDropDown ul li>a {
    	display: inline-block;
    	width: 160px;
    	height: 50px;
    	color: black;
    	text-decoration: none;
    	text-align: left;
    	padding-left: 30px;
    }
    
    #userDropDown ul li:hover {
    	background-color: #EEEEEE;
    }
    
    #userDropDown ul li:first-child:hover {
    	background-color: #FFA800;
    }

    可以看到并没有什么难懂的样式代码,这里也是去掉了a标签默认的下划线,并为下拉菜单的选项添加了悬停效果,悬停使a标签的背景颜色变成灰色,这里的第一个li的样式与其他也有所不同,可以通过伪类:first-child来选中元素。

    以下为js部分

    $("#displayPicture").hover(function(){
    	$("#userDropDown").css("display","block");
    },function(){})
    $("#userDropDown").hover(function(){},function(){
    	$("#userDropDown").css("display","none");
    	$("#accountBalance_display").html($("#accountBalance").val());
    });
    使用的是jquery,这里的displayPicture即为头像图片的id,可以看到在jquery中,hover()传进的两个function分别对应鼠标悬停事件和鼠标移出事件。

    至此,全部效果完成。





































    展开全文
  • HTML+CSS实现导航条及下拉菜单

    万次阅读 2019-08-06 15:20:34
    html+css实现下拉菜单
  • 经典DIV+CSS下拉菜单

    万次阅读 2018-07-27 18:55:08
    符合WEB标准的CSS下拉导航菜单布局及css下拉菜单模板   HTML代码如下 &lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="###"&gt;div+css&lt;/a&gt; &...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;title&gt;庄稼汉&lt;/title&...
  • CSS下拉菜单,宽度自适应

    热门讨论 2011-02-08 11:26:16
    这是一个纯CSS下拉菜单,提供给CSS爱好者学习,应用不是非常广泛,如果作为导航栏请固定高度,否则会将页面玩挤下。
  • css下拉菜单制作原理

    千次阅读 2010-11-09 09:55:00
    css下拉菜单制作原理详解2009-06-24 14:51css下拉菜单制作原理这几天一直研究下拉式菜单的css制作方法,以前没有仔细研究,感觉很难,看不懂,云雾缭绕的,现在发现用css不仅有不错的效果的,而且简单易用!...
  • 我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志,箭头是由边框组成的,但组合起来后提示工具像个语音信息框。 以下实例演示了如何为显示在顶部的提示工具添加底部箭头: 淡入效果 ...
  • CSS 下拉菜单

    2017-11-29 21:54:43
    CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 下拉菜单实例 实例演示 1 文本下拉菜单 实例演示 2 下拉菜单 实例演示 3 基本下拉菜单 ...
  • vue css下拉菜单

    2020-08-02 18:54:50
    <div class="dropdown"> <span>Mouse over me</span> <div class="dropdown-content"> <p>Hello World!</p> </div> </div> <... display: i
  • 演示地址:http://www.corange.cn/demo/3806/index.html &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "...&gt;&lt;HTML&gt;&lt;HEAD...
  • 下拉菜单的ul设置成绝对定位之后,鼠标一向下,想点下拉菜单时,下拉菜单就没了 不设置成绝对定位,又会对后面的层产生影响,一弹出下拉菜单直接把后面的图片挤走了。。该怎么弄啊
  • 列表标签 无序列表 ul 无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下: &lt; ul&gt; &lt;li&gt;列表项1&lt;/li&...有序列表即为有排列顺序的
  • 刚学习前端的小伙伴或许对下拉菜单css怎么设置不太了解,小猿圈加加今天对css下拉菜单做一个详细的解释,感兴趣的同学可以学习一下,这是前端的基础。先用一段代码说明一下:.dropdown { position: relative; ...
  • css下拉菜单无法弹出

    2019-05-27 09:40:00
    CSS下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了。 Z-INDEX 是设置不同块的层次的,我修改了问题还是有。 后来发现是必须要把该便签的父标签的 ...
  • 假设我们希望导航栏上有一个元素(以下简称“菜单标题”),把鼠标移到标题上面时其下方会弹出一列菜单,鼠标离开时菜带又隐藏起来。 然而,当试图把鼠标从菜单标题移到菜单内容中时,菜单竟然也隐藏了。 我的菜单...
  • CSS下拉菜单代码

    千次阅读 2015-02-11 15:12:49
    超简洁但很实用的纯CSS下拉菜单代码,最多支持二级,不过对于一般性的网站,已经够用了,本代码更重要的是让CSS爱好者学会以一种下拉菜单的编写思路,从而更好的实现更多级的的导航菜单。
  • CSS实现下拉菜单

    千次阅读 2019-04-09 22:18:22
    1.知识点 定位postition 浮动float 展示display 2.实现效果 3.代码 <!DOCTYPE html> <...下拉菜单</title> <meta charset="utf-8"> <style> ul { list-...
1 2 3 4 5 ... 20
收藏数 36,305
精华内容 14,522
关键字:

css下拉菜单