欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

如何通过html和css完成下拉菜单的制作？

程序员文章站 2022-03-19 12:53:37
...
例如这种，当然这只是一个例子，其他的也行，如果可以，请简要说明一下用到哪些技能点和原理。

回复内容：

几个下拉菜单display:none
按钮 :hover 给下拉菜单display:block
也许可以 无脚本，纯HTML和 CSS 实现的多级下拉菜单，在非 IE 内核浏览器和 IE8+ 表现完美。

如何通过html和css完成下拉菜单的制作？

主体使用ul>li>ul>li>......嵌套定义多级。




  
http-equiv="Content-Type" content="text/html; charset=utf-8">
  纯 CSS 多级菜单
  
    .menu{}
    .menu ul,.menu li{margin:0; padding:0;list-style:none outside;}
    .menu>ul{overflow:auto; display:inline-block;}
    .menu a,.menu span{ cursor:default; height:30px; line-height:30px; padding:0 5px; display:block; text-overflow:ellipsis; overflow:hidden; text-decoration:none; color:MenuText;}
    .menu a:hover,.menu span:hover,.menu li:hover>a,.menu li:hover>span{color:HighlightText;}
    .menu li:hover{background-color:Highlight;}
    .menu li:hover>ul{display:block;}
    .menu>ul>li{float:left;}
    .menu>ul>li ul{display:none;float:left; background-color:#fff; border:1px solid Highlight; position:absolute;}
    .menu>ul>li li{padding-left:25px;margin:2px;background:transparent url(data:image/gif;base64,R0lGODlhEAAQAIAAAJmZmf///yH5BAAAAAAALAAAAAAQABAAAAIjhI9pwe2+nmRRIQrmjBrmYB1Y93Ak+IXVd6LtiIZwa5JqWAAAOw==) no-repeat 5px center; width:150px;}
    .menu>ul>li>ul>li ul{margin-left:140px; margin-top:-30px;}
    .menu li.expand>a,.menu li.expand>span{background:transparent url(data:image/png;base64,R0lGODlhAwAQAIABAAAAAP///yH5BAEAAAEALAAAAAADABAAAAIKjI8JBtv/wko0FQA7) no-repeat right center; padding-right:10px; margin-right:5px;}
    .menu>ul>li.expand>a,.menu>ul>li.expand>span{ background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAADCAYAAACwAX77AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAaSURBVBhXY2BgYPiPAwOFMSXBgjAA0wnmAwASVQv19UVKmwAAAABJRU5ErkJggg==);}
既然你这么问了，我就当你是新手了，还好，我也是新手。

下面开说：
感觉用select标签效果好像不是很好，效果如下：
如何通过html和css完成下拉菜单的制作？不如直接像 @周黎伟所说的，用一个button加上4个div

首先复习一下基本知识：
display：
如何通过html和css完成下拉菜单的制作？ 如何通过html和css完成下拉菜单的制作？ 如何通过html和css完成下拉菜单的制作？所以这里我用inline－block

代码如下：
如何通过html和css完成下拉菜单的制作？
希望大神们能批评指正

最后的效果如图：
如何通过html和css完成下拉菜单的制作？

 lang="en">

    
charset="UTF-8">
    下拉菜单
    "text/css">
    
    .bt{
        width: 50px;height: 28px;
        border: 1px solid #ddd;
        background-color: #eee;
        font:12px "宋体";
    }
    .ct{
        display: none;}

    .dt{
        height: 30px;
        margin-top: 0px;
        border: 1px solid #ddd;
        background-color: white;
        padding:auto 10px;
       }

    .dt1{
        height: 30px;
        margin-top: 1px;
        border: 1px solid #ddd;
        background-color: white;
        padding:auto 10px;}
 
    .dt:hover,.dt1:hover{background-color: #ddd;}
    .bt:hover{background-color: green;}
    .at:hover .ct{display: inline-block;}
 
    



 class="at">
    

        
    


    
 class="ct" >
        
 class="dt1">下拉菜单


        
 class="dt">下拉菜单


        
 class="dt">下拉菜单


        
 class="dt">下拉菜单
要求不高的话用bootstrap 就好了。

做这个功能不难，难的是如何封装和复用。

个人看好polymer这种解决方案。 



	
charset="utf-8">
	css实现下拉菜单
	"text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#nav{
		background-color: #eee;
		width: 300px;
		height: 40px;
		margin: 0 auto;
	}
	ul{
		list-style: none;
	}
	ul li {
		float: left;
		line-height: 40px;
		text-align: center;
	}
	a{
		text-decoration: none;
		color:#000;
		padding: 0 10px;
		display: block;	
	}
	a:hover{
		color: #fff;
		background-color: #666;
	}
	ul li ul li{
		float: none;
		background-color: #eee;
		margin-top: 2px;
	}
	ul li ul {
		position: absolute;
		display: none;
	}
	ul li ul li a:hover{
		background-color: #06f;
	}
	ul li:hover ul{
		display: block;
	}
这个是网易云课堂前端微专业的页面布局的期末测试题。 我也试一下。
这里大部分答案都是hover事件触发下拉菜单出现。其实我总觉得这样不太自然，所以我尽力去做成（伪）点击触发。
---------------------------------------------------------------------
# 具体想法：
菜单是， 下拉菜单的容器是
...

然后利用a:focus + .dropdown{ ... } 来实现。
---------------------------------------------------------------------
要点1：CSS如何实现影响其他元素？
看这里 > html - How to affect other elements when a div is hovered
要点2： 如何做出（伪）点击触发？
基本用 a：focus，个人感觉自然一点。当然如果失去焦点，下拉菜单容器也会相应地隐藏。
--------------------------------------------------------------------
# HTML BODY 部分代码：

      href="#">Menu
	  
 class="drop-down" id="drop-down">
		   
    
			
  • Option 1				
                        
  • Option 2
			
  • Option 3
			
  • Option 4
		   
	  

    •
    更正一点小错误，只有一个单选按钮时，选中后就不能取消选中了。所以最好用复选按钮。

    原答案如下
    ===========================

    楼上有同学写了css用伪类:hover实现的下拉菜单 这是一种 我再补充下

    下拉菜单抛开样式的不同 交互上无非两种
    鼠标移到button上出现菜单（如楼上）
    以及点击后出现菜单（我要说的）

    题主问的是html+css 而很多同学提到了用js添加click事件 这也是大多数下拉菜单的做法
    不过为了不跑题 就只用html+css 不用js 那就考css基本功了

    这里简单说下思路

    html结构如下
    点击我出现下拉菜单
type="checkbok"> 

    
	
      
		
    • XXX
		
    • XXX
		
    • XXX
		
    • XXX
	


      •
      用列表，隐藏，然后hover.的时候block就可以了 pepsized.com/css-only-a

      如果想用纯css实现click效果:
      tympanus.net/codrops/20如何通过html和css完成下拉菜单的制作？

      声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

      相关文章

      相关视频

      网友评论

      文明上网理性发言，请遵守 新闻评论服务协议

      我要评论
    • 如何通过html和css完成下拉菜单的制作？

      • 专题推荐

      作者信息
      如何通过html和css完成下拉菜单的制作？

      认证0级讲师

      发布技术文章
      • 最新文章
      • 热门排行
      推荐视频教程
    • 如何通过html和css完成下拉菜单的制作？javascript初级视频教程
    • 如何通过html和css完成下拉菜单的制作？jquery 基础视频教程
      • 视频教程分类

      上一篇： jQuery 1.5.1 发布，全面支持IE9 修复大量bug_jquery

      下一篇： js实现页面加载时自动触发超链接实例详解

      推荐阅读