当前位置：Gxlcms > html代码 > 如何通过html和css完成下拉菜单的制作？

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

时间：2021-07-01 10:21:17 帮助过：28人阅读

例如这种，当然这只是一个例子，其他的也行，如果可以，请简要说明一下用到哪些技能点和原理。

回复内容：

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

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




   http-equiv="Content-Type" content="text/html; charset=utf-8">
  </span>纯 CSS 多级菜单<span class="nt">
  




   id="mainnav" class="menu">
    
       href="#">Link
       href="#">Link
       class="expand"> href="#">Link
        
           href="#">Link
           href="#">Link
           class="expand"> href="#">很长很长很长很长很长很长很长很长很长很长
            
               href="#">Link
               href="#">Link
               class="expand"> href="#">LinkLink
                
                   class="expand"> href="#">Link
                    
                       href="#">Link
                       href="#">Link
                       href="#">Link
                       href="#">Link
                       href="#">Link
                    
                  
                   href="#">Link
                   class="expand">span 菜单项
                    
                      span 菜单项
                       href="#">Link
                       href="#">Link
                       href="#">Link
                       href="#">Link
                    
                  
                   href="#">Link
                   href="#">Link
                
              
               href="#">Link
               href="#">Link
            
          
           href="#">Link
           href="#">Link
        
      
       href="#">Link
       href="#">Link

既然你这么问了，我就当你是新手了，还好，我也是新手。

下面开说：
感觉用select标签效果好像不是很好，效果如下：

不如直接像 @周黎伟所说的，用一个button加上4个div

首先复习一下基本知识：
display：

所以这里我用inline－block

代码如下：

希望大神们能批评指正

最后的效果如图：


 lang="en">

     charset="UTF-8">
    </span>下拉菜单<span class="nt">
    


 class="at">
    
         class="bt" type="button" >按钮
    
     class="ct" >
         class="dt1">下拉菜单


         class="dt">下拉菜单


         class="dt">下拉菜单


         class="dt">下拉菜单

charset="utf-8"> </span>css实现下拉菜单<span class="nt"> id="nav"> href="#">按钮1 href="#">按钮2 href="#">下拉菜单项 href="#">下拉菜单项 href="#">按钮3 href="#">下拉菜单项 href="#">下拉菜单项 href="#">下拉菜单项 href="#">按钮4 href="#">按钮5

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

回复内容：

人气教程排行