精华内容
下载资源
问答
  • 今天我们要给大家介绍一款简单而实用的HTML5/CSS3水平二级下拉菜单,这款CSS3菜单由简单的ul列表组成,因此兼容所有的浏览器。它的背景一共由3部分组成:主菜单的淡蓝色、下拉菜单黑色和下拉菜单选中时的红色。同时...
  • HTML二级下拉菜单常见样式以及常见问题

    万次阅读 多人点赞 2018-08-12 15:28:06
    inlind-block实现的技术点不过于把菜单项的display样式设置为inline-block即可,但是这时需要注意的是inline-block自带内间距和外间距,如果不希望这些间距影响排版的朋友,可以通过设置菜单项...

    水平导航栏可以有两种实现方式:1、浮动;2、inline-block

    • 浮动实现的技术点有:
      1、浮动的技术原理
      2、 浮动溢出的解决(BCF原理)
      3、清除浮动的方法

    • inlind-block实现的技术点不过于把菜单项的display样式设置为inline-block即可,但是这时需要注意的是inline-block自带内间距和外间距,如果不希望这些间距影响排版的朋友,可以通过设置菜单项的{margin:0;padding:0;}得以解决。

    现在介绍一下两种常见的菜单样式、实现方式和常见的问题。

    • 悬浮单列下拉

    这里写图片描述

    这种样式是通过鼠标悬浮显示单列菜单的情况,这种实现方式一般通过ul和li元素实现,实现步骤如下:
    1、建立容器

          .top-container{
                background: #fbfbfb;
                height:30px;
                min-width: 1500px;
                border: 1px solid #e8e8e8;
                font-family: 'Tahoma','simsun' !important;
                color: #747d87;
                margin: 0;
            }
      <body style="margin:0;">
        <div class="top-container">
    
        </div>
      </body>

    结果就是一个白色长条,就不截图了,这里需要注意就是各种浏览器对body的外边距实现不一,所以一般都要对body的样式里添加margin: 0;
    2、建立导航栏容器

    .top-wrapper {
        width: 1450px;
        height: 30px;
        border: 1px solid red;
        margin: auto;
    }
      <body style="margin:0;">
        <div class="top-container">
             <div class="top-wrapper wrapper">
             </div>
        </div>
      </body>

    结果就是居中的导航容器,其中margin:auto;用来水平居中,这个样式需要注意的是需要条件position:relative;和必须是块级元素
    这里写图片描述
    3、建立菜单项

      <body style="margin:0;">
            <!--导航栏一般需要一个容器,设置width:100%适应浏览器的大小变化-->
       <div  class="top-container container">
         <!--导航栏wrapper一般设置一个固定大小这样子可以通过margin:auto;实现导航栏水平居中
         由于顶层容器是适应浏览器变化宽度,所以可以保持水平导航栏自适应浏览器窗口宽度保持居中-->
        <div class="top-wrapper wrapper">
          <!--这个是普通导航栏的容器,就是除了"立即登陆"和"注册新账号"-->
          <div class="nav top-left-nav">
            <!--开始实现列表-->
           <ul>
            <li  class="first-nav"><span>站长之家</span></li>
            <li  class="first-nav"><span>站长论坛</span></li>
            <li class="dropdown first-nav"><span>站长工具<i class="icon icon-arrow"></i></span>
             <ul class="sec-nav">
              <li><a href="#">ALEXA排名查询</a></li>
              <li><a href="#">百度权重查询</a></li>
              <li><a href="#">SEO概况查询</a></li>
              <li><a href="#">友情链接查询</a></li>
              <li><a href="#">Google PR查询</a></li>
              <li><a href="#">Whois信息查询</a></li>
              <li><a href="#">域名备案查询</a></li>
             </ul> </li>
            <li class="dropdown  first-nav"><span>站长素材<i class="icon icon-arrow"></i></span>
             <ul class="sec-nav">
              <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>
              <li><a href="#">PSD素材</a></li>
              <li><a href="#">PPT模板</a></li>
             </ul> </li>
            <li class="dropdown  first-nav"><span>网站排行<i class="icon icon-arrow"></i></span>
             <ul class="sec-nav">
              <li><a href="#">行业网站排名</a></li>
              <li><a href="#">地区网站排名</a></li>
             </ul> </li>
            <li  class="first-nav"><span>手机版</span>
             <ul class="sec-nav">
              <li><a href="#"><span><img src="2.jpg" /></span></a></li>
             </ul> </li>
            <li  class="first-nav"><span>工具旧版</span></li>
            <li class="new  first-nav"><span>SEO工具包<i class="icon icon-new"></i></span></li>
           </ul>
          </div>
           <div class="nav user-nav">
            <ul>
             <li class="first-nav"><a href="#">立即登录</a></li>
             <li class="first-nav"><a href="#">立即注册</a></li>
            </ul>
          </div>
        </div>
       </div>
    .top-left-nav,.user-nav {
        display: inline-block;
        border: 1px solid red;
        height: 30px;
    }
    
    .nav {
        display: inline-block;
        margin: 0 auto;
        padding: 0;
        position: relative;
    }
    
    .nav:after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        width: 0px;
        height: 0px;
    }
    
    .nav ul ,.nav li {
        display: block;
        position: relative;
        margin: 0px;
        padding: 0px;
    }
    
    .nav a {
        text-decoration: none;
        display: block;
        text-align: center;
        margin: 0 auto;
    }
    
    .first-nav {
        text-align: center;
        display: block;
        margin: 0 auto;
    }
    
    .sec-nav {
        position: relative;
        display: block;
        text-align: center;
    }
    
    .top-left-nav .first-nav{
      /*显示具体布局*/
        width:130px;
        line-height:30px;
    }

    这时的结果是这样的:
    这里写图片描述
    很明显ul列表是垂直排列了,这时就是浮动作用体现的时候了,修改first-nav的样式

            .first-nav{
                    float: left;
                    text-align:center;
                    display: block;
                    margin:0 auto;
            }

    导航栏的雏形渐渐出现,但是拖在一级菜单项的蓝字怎么办呢?
    这里写图片描述
    添加样式:

    .top-left-nav  .sec-nav{
        margin:0px;
        display: none;
        padding:5px 3px;
        width: 130px;
        z-index:2;
    }

    结果很满意,其中diplay:none;就是实现隐藏效果的关键一环,说到隐藏,为何不用visibility:hidden;呢?其实使用display:none;时,元素是不占据任何空间的,相当于就是删除了这个元素;而visibility:hidden;元素依旧占据空间,只是变成不可见的状态,也无法接受事件,例如不能点击、不能鼠标悬浮等。隐藏是实现了,但是怎么让它重新出现,实现下拉效果呢?

    这里写图片描述
    既然我们设置display:none把元素隐藏了了,那就把display样式设置可见的样式就行了,添加样式

    .top-left-nav .first-nav:hover .sec-nav {
        display: block;
        border: 1px solid #e8e8e8;
    }

    下拉样式已经实现,结果很不错,这里用到的是hover悬浮伪类,当鼠标悬浮元素之上时应用样式,刚才我们是利用display:none;隐藏元素的,所以可以直接通过display:block;使元素重新恢复。
    这里写图片描述
    代码到了这里,基本已经实现完成,全部代码如下:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>测试</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            .top-container{
                background: #fbfbfb;
                height:30px;
                min-width: 1500px;
                border: 1px solid #e8e8e8;
                font-family: 'Tahoma','simsun' !important;
                color: #747d87;
                margin: 0;
                z-index:2;
            }
            .top-wrapper{
                width:1450px;
                height: 30px;
                border: 1px solid red;
                margin: auto;
            }
    
            .top-left-nav,.user-nav{
                display: inline-block;
                border: 1px solid red;
                height: 30px;
            }
    
            .nav{
                display: inline-block;
                margin:0 auto;
                padding:0;
                position: relative;
            }
    
            .nav:after{
                content:"";
                display:block;
                clear:both;
                visibility: hidden;
                width:0px;
                height:0px;
            }
    
            .nav ul ,.nav li{
                display: block;
                position: relative;
                margin:0px;
                padding:0px;
            }
    
            .nav a{
                text-decoration: none;
                display: block;
                text-align: center;
                margin:0 auto;
            }
    
            .first-nav{
                    float: left;
                    text-align:center;
                    display: block;
                    margin:0 auto;
            }
    
            .sec-nav{
                    position: relative;
                    display: block;
                    text-align:center;
            }
            .top-left-nav .first-nav{
              /*显示具体布局*/
                width:130px;
                line-height:30px;
            }
            .top-left-nav  .sec-nav{
                margin:0px;
                display: none;
                padding:5px 3px;
                width: 130px;
            }
            .top-left-nav .first-nav:hover .sec-nav{
                display: block;
                border: 1px solid #e8e8e8;
            }
        </style>
      </head>
      <body style="margin:0;">
            <!--导航栏一般需要一个容器,设置width:100%适应浏览器的大小变化-->
       <div  class="top-container container">
         <!--导航栏wrapper一般设置一个固定大小这样子可以通过margin:auto;实现导航栏水平居中
         由于顶层容器是适应浏览器变化宽度,所以可以保持水平导航栏自适应浏览器窗口宽度保持居中-->
        <div class="top-wrapper wrapper">
          <!--这个是普通导航栏的容器,就是除了"立即登陆"和"注册新账号"-->
          <div class="nav top-left-nav">
            <!--开始实现列表-->
           <ul>
            <li  class="first-nav"><span>站长之家</span></li>
            <li  class="first-nav"><span>站长论坛</span></li>
            <li class="dropdown first-nav"><span>站长工具<i class="icon icon-arrow"></i></span>
             <ul class="sec-nav">
              <li><a href="#">ALEXA排名查询</a></li>
              <li><a href="#">百度权重查询</a></li>
              <li><a href="#">SEO概况查询</a></li>
              <li><a href="#">友情链接查询</a></li>
              <li><a href="#">Google PR查询</a></li>
              <li><a href="#">Whois信息查询</a></li>
              <li><a href="#">域名备案查询</a></li>
             </ul> </li>
            <li class="dropdown  first-nav"><span>站长素材<i class="icon icon-arrow"></i></span>
             <ul class="sec-nav">
              <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>
              <li><a href="#">PSD素材</a></li>
              <li><a href="#">PPT模板</a></li>
             </ul> </li>
            <li class="dropdown  first-nav"><span>网站排行<i class="icon icon-arrow"></i></span>
             <ul class="sec-nav">
              <li><a href="#">行业网站排名</a></li>
              <li><a href="#">地区网站排名</a></li>
             </ul> </li>
            <li  class="first-nav"><span>手机版</span>
             <ul class="sec-nav">
              <li><a href="#"><span><img src="2.jpg" /></span></a></li>
             </ul> </li>
            <li  class="first-nav"><span>工具旧版</span></li>
            <li class="new  first-nav"><span>SEO工具包<i class="icon icon-new"></i></span></li>
           </ul>
          </div>
           <div class="nav user-nav">
            <ul>
             <li class="first-nav"><a href="#">立即登录</a></li>
             <li class="first-nav"><a href="#">立即注册</a></li>
            </ul>
          </div>
        </div>
       </div>
      </body>
    </html>
    • 悬浮全下拉
      这里写图片描述
      这种样式跟上一种样式不同的地方在于,悬浮的时候全部二级菜单都会下拉,在悬浮的在菜单项会出现深色强调样式,这个需要js实现。这种一般利用dt和dd实现,因为是成块出现的。
      <div class="nav-bar-wrapper">
        <div class="nav-bar-bg">
          <div class="nav-bar-bg-top">
            <div class="nav-bar-container">
              <dl id="dl1"  class="w102" onmouseover="setOn(1)" onmouseout="clearOn(6)">
                <dt>首页</dt>
                <dd>
                  <a>历史上的今天</a>
                  <a>百科冷知识</a>
                  <a>图解百科</a>
                </dd>
              </dl>
              <dl id="dl2"  class="w104" onmouseover="setOn(2)" onmouseout="clearOn(6)">
                <dt>分类</dt>
                <dd class="cat">
                  <a>艺术</a>
                  <a>科学</a>
                  <a>自然</a>
                  <a>文化</a>
                  <a>地理</a>
                  <a>生活</a>
                  <a>社会</a>
                  <a>人物</a>
                  <a>经济</a>
                  <a>体育</a>
                  <a>历史</a>
                </dd>
              </dl>
              <dl  id="dl3"  class="w138" onmouseover="setOn(3)"  onmouseout="clearOn(6)">
                <dt>特色百科</dt>
                <dd>
                  <a>数字博物馆</a>
                  <a>非遗百科</a>
                  <a>多肉百科</a>
                  <a>恐龙百科</a>
                  <a>城市百科</a>
                  <a>二战百科</a>
                </dd>
              </dl>
              <dl  id="dl4"  class="w102" onmouseover="setOn(4)"  onmouseout="clearOn(6)">
                <dt>用户</dt>
                <dd>
                  <a>蝌蚪团</a>
                  <a>燃梦计划</a>
                  <a>百科任务</a>
                  <a>百科商城</a>
                </dd>
              </dl>
              <dl  id="dl5" class="w138" onmouseover="setOn(5)" onmouseout="clearOn(6)">
                <dt>权威合作</dt>
                <dd>
                  <a>合作模式</a>
                  <a>常见问题</a>
                  <a>联系方式</a>
                </dd>
              </dl>
              <dl  id="dl6" class="w138" onmouseover="setOn(6)" onmouseout="clearOn(6)">
                <dt>手机百科</dt>
                <dd><a>网页版</a></dd>
              </dl>
              <div class="user-center"><a><i class="icon icon-user"></i>个人中心</a></div>
              <div class="nav-separator">
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>

    观察html代码前4层元素,我们发现多了两个:nav-bar-bg,nav-bar-bg-top,这两层是实现下拉背景蓝色块的。我们来看看这两个新添加的元素的作用,先去除nav-bar-bg-top元素,结果如下:
    这里写图片描述

    重新加上该元素,发现nav-bar-bg-top这个元素是实现遮挡nav-bar-bg元素的效果,从而实现导航栏一级菜单的蓝色背景。
    这里写图片描述
    上面提到这个样式悬浮下拉全部二级菜单项,并为其添加强调色的,这个实现方式需要借助js通过注册onmouseover鼠标悬浮事件实现。从html代码中我们可以看到,我们使用的是setOn函数,现在我们给出他的实现:

     function setOn(num){
      var e=document.getElementById("dl"+num);
      if (haveClass(e,"nav-on")){
        return;
      }
      for(var id = 1;id<=6;id++){
          e=document.getElementById("dl"+id);
          var c=e.children[0];
          if(id==num){
            e.className+=" nav-on";
            c.className="dt-on";
          }else{
            releaseOn(e,"nav-on");
            releaseOn(e.children[0],"dt-on")
          }
      }
      document.getElementsByClassName("nav-bar-wrapper")[0].style.overflow="visible";
    }
    
    function releaseOn(e,flag){
      var all=e.className.split(/\s+/);
      e.className="";
      for (var i in all){
        if (all[i]!=flag){
          e.className+=all[i]+" ";
        }
      }
    }
    
    function clearOn(num){
      for(var id = 1;id<=num;id++){
        var e=document.getElementById("dl"+id);
        releaseOn(e,"nav-on");
        releaseOn(e.children[0],"dt-on");
      }
      document.getElementsByClassName("nav-bar-wrapper")[0].style.overflow="hidden";
    }
    
    function haveClass(e,name){
      var all=e.className.split(' ');
      for (var c in all){
        if (all[c]==name){
          return true;
        }
      }
      return false;
    }

    从js代码中可以看出,主要对id为dl前缀的的元素进行操作,从html代码中可以看出,这些元素分别代表一个菜单,出现的两个类名”nav-on”、”dt-on”显然就是控制菜单强调色样式的,我们分析涉及这两个类选择器的css代码:

    .nav-bar-wrapper dl dd{
      border-left: 1px solid #3a6fa2;
      margin: 0px auto;
      padding: 0px;
      height: 0px;
      display: none;
      transition:height 3s;
    }
    .nav-bar-wrapper .nav-bar-container:hover dd{
      display: block;
      height: 200px;
    }
    dl.nav-on dd{
      background: #19508b;
    }

    nav-on是对二级菜单项元素dd的操作,分析可知实现强调色就是通过添加类.nav-on从而使第三个样式dl.nav-on dd选择器成立。

    .nav-bar-wrapper dl dt{
      font-size: 16px;
      color: #fff;
      display: block;
      height: 43px;
      line-height: 43px;
      text-align: center;
    }
    
    .dt-on{
      background: #338ce6;
    }

    顾名思义,dt-on是用来操作dt也就是一级菜单项的样式。我们分析js代码时会发现最后面还有一句代码

      document.getElementsByClassName("nav-bar-wrapper")[0].style.overflow="visible";

    overflow样式是用来控制溢出部分的,overflow:visible;就是说明溢出部分可见,这句代码的作用为何呢?我们可以想到新添加的两个元素,其中nav-bar-bg,我们分析其CSS代码:

    .nav-bar-wrapper{
      width:100%;
      position:relative;
      height: 43px;
      overflow: hidden;
      z-index: 2;
    }
    .nav-bar-bg{
      width:100%;
      height:245px;
      /***解决挤压问题**/
      position:absolute;
      background: rgb(46,97,158,.95);
    }

    其中height:245px;是远大于nav-bar-wrapper容器的43px的,而且开始设置overflow:hidden;显然就是影藏nav-bar-bg的溢出部分,当设置overflow:visible;时,溢出部分变成可见,就可以形成下拉背景块的效果
    这里写图片描述

    • 制作导航栏的常见问题
      1、浮动溢出问题:由于水平导航栏涉及浮动,所以往往会与浮动溢出相关联,这就涉及到解决浮动溢出的问题,这方面参见我的另一篇文章
      2、下拉菜单被页面其他内容遮盖的问题:需要在顶层同级父元素设置position:relative;以及z-index,举个例子
    <div class="first">
        <div class="first-content">
                ...
        </div>
        ...
    </div>
    <div class="sec">
        <div class="sec-content">
                ...
        </div>
        ...
    </div>

    如果first-content的内容被sec的内容遮盖,错误的做法

    .first-content{
        position:relative;
        z-index:2;
    }
    
    .sec{
        position:relative;
        z-index:1;
    }

    其中first-content和.sec不是同级的元素,所以z-index无法起到作用,所以正确的做法应该是如下

    .first
        position:relative;
        z-index:2;
    }
    
    .sec{
        position:relative;
        z-index:1;
    }

    3、下拉菜单挤压页面内容的问题
    可以把下拉菜单设置position:absolute;因为此时元素不占文档流的空间,所以挤压页面内容的情况就可以避免,举个例子
    这里写图片描述
    这是第二种样式的导航栏,高仿百度百科的实现,这个发生了页面挤压的情况
    这里写图片描述
    我们可以从上图看到后面logo被挤到了右边,如果我们把nav-bar-bg的样式设置为position:absolute;,效果如下图,logo没有被挤压
    这里写图片描述
    也许有人会问,为什么要设置nav-bar-bg,不设置nav-bar-wrapper的position样式呢?正如前面所说,position:absolute;样式的元素不占用元素的空间,所以nav-bar-wrapper的空间会被占据,就会发生元素重叠的现象。

    欢迎大家访问笔者的github:https://github.com/delin10/web-里面有一些笔者模仿制作的网页。笔者能力有限,如有纰漏还望指正。

    展开全文
  • HTML制作多级菜单_一级下拉菜单+三级选项卡tab-移动到菜单上就切换选项卡.zip
  • 如何在Excel中制作联动的二级下拉菜单,具体该怎么去制作的呢?其实设置方法有很多种,接下来小编举例简单的例子告诉大家Excel函数制作二级联动下拉菜单的方法。Excel函数制作二级联动下拉菜单的方法1、首先看一下...

    如何在Excel中制作联动的二级下拉菜单,具体该怎么去制作的呢?其实设置方法有很多种,接下来小编举例简单的例子告诉大家Excel函数制作二级联动下拉菜单的方法。

    Excel函数制作二级联动下拉菜单的方法

    1、首先看一下原始数据,原始信息在一张工作表,第一行是省市名称,下面的若干行为对应省市下面的地名和区名。需要在另外一张工作表中A列和B列建立联动的二级下拉菜单。

    2、首先,选中原始表的所有数据(包括多余的空白单元格),按F5或者Ctrl+G调出定位对话框。选择左下角的【定位条件】。

    3、如下图,选则【常量】,并点击【确定】按钮。这样,所有的非空单元格被选中。

    4、选择功能区的【数据】-【有效性】-【根据所选内容创建】。

    5、由于标题在第一行,因此选择【首行】为名称,然后点击【确定】按钮。

    6、操作完毕后,在名称管理器中就可以看到定义的名称了。

    7、选中第一行的省市名称(也定位到非空白单元格),在名称框中输入“省市”两个字,然后按回车,这样就定义了一个“省市”的名称。

    8、选中操作界面的A2单元格,选择【数据】-【数据有效性】。

    9、如下图,选择【序列】,【来源处】输入:=省市,然后点击【确定】按钮。

    10、这样,就在A2单元格生成了省市信息的下拉菜单。

    11、同样的方法,选中B2单元格,设置数据有效性,输入公式:=INDIRECT($A$2)。

    12、设置完毕后,A2单元格选择“河北”时B2的下拉菜单返回“河北”的信息;A2单元格选择“北京”时B2的下拉菜单返回“北京”的信息。

    注意:

    上述二级下拉菜单设置的公式采取了行列都绝对引用,如果要使二级下拉菜单对整列均可用,将公式更改为:=INDIRECT($A2)即可。

    猜你感兴趣:

    1.Excel中制作二级联动下拉菜单的操作方法

    2.excel怎么制作二级联动下拉菜单

    3.excel制作二级联动下拉菜单的方法

    4.excel2007 怎么做二级下拉菜单

    5.excel怎么制作三级联动下拉菜单

    展开全文
  • HTML制作二级下拉菜单的方法步骤

    千次阅读 2021-07-01 03:45:40
    网络上的各种网页,二级下拉菜单非常常见,那么HTML中怎样制作二级下拉菜单呢?工具/材料hbuilder操作方法01如图,先书写一个div标签,并且给这个div标签添加一个id。02然后在div里面嵌套一个p标签,p标签里面放置了一个...

    网络上的各种网页,二级下拉菜单非常常见,那么HTML中怎样制作二级下拉菜单呢?工具/材料

    hbuilder

    操作方法

    01

    如图,先书写一个div标签,并且给这个div标签添加一个id。

    02

    然后在div里面嵌套一个p标签,p标签里面放置了一个主菜单“头像”。我们要做的效果就是当鼠标放在“头像”这里就会弹出下拉菜单。

    03

    然后我们使用*清除所有元素的margin和padding值。

    04

    接着我们来设置id为icon的div的样式,这里只设置宽度,高度就靠里面的下拉菜单的内容来撑开这个div的高度。

    这里我就使用line-height和text-align来让文字上下左右居中,并且我还设置了border边框。

    05

    最后,二级菜单的主菜单做出来了。

    06

    接着再在之前的div标签里面嵌套ul,ul里面放置li,li里面就是我们二级下拉菜单的内容。

    07

    接着来预览一下效果,可以看到二级下拉菜单的左边有一些小圆点。

    08

    然后我们设置li标签的CSS样式为:list-style-type:none;

    09

    这样小圆点就会去掉,不会影响下拉菜单的美观程度。

    10

    我们常见的下拉菜单刚开始是看不见的,只有当鼠标放上去的时候才可以看见,所以我们要把下拉菜单先隐藏起来,这就需要设置ul的display属性为none。

    11

    接着书写JavaScript,获取到二级菜单所在的div,以及下拉菜单所在的ul。

    12

    如图,我们设置当鼠标经过icon这个div时,ul的属性变为可见状态。

    13

    而当鼠标离开的时候,ul就会隐藏起来,变成不可见状态,这样我们的二级下拉菜单就完成了。

    14

    附上源代码哦!

    *{

    margin: 0;

    padding: 0;

    }

    #icon{

    width: 100px;

    line-height: 30px;

    text-align: center;

    border: 1px solid black;

    margin: 100px;

    }

    li{

    list-style-type: none;

    }

    ul{

    display: none;

    }

    头像

    • 个人中心
    • 我的收入
    • 消息
    • 退出登录

    var icon=document.getElementById("icon");

    var oul=document.getElementsByTagName("ul")[0];

    icon.οnmοuseοver=function(){

    oul.style.display="block";

    }

    icon.οnmοuseοut=function(){

    oul.style.display="none";

    }

    展开全文
  • 本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码。分享给大家供大家参考。具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发...
  • JS左侧下拉二级菜单代码JS左侧下拉二级菜单代码JS左侧下拉二级菜单代码JS左侧下拉二级菜单代码如题 很漂亮
  • 本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并不是...
  • 本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
  • 本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果。分享给大家供大家参考。具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是...
  • jQuery个性动画二级下拉导航菜单基于jquery1.8.3.min.js制作,鼠标经过显示二级下拉菜单
  • DIV+CSS制作二级菜单(横排二级下拉菜单)以及二级菜单出现错位解决方法

    html二级菜单制作(横排二级下拉菜单)以及二级菜单出现错位怎么解决

    摘要:DIV+CSS制作二级菜单(横排二级下拉菜单)以及二级菜单出现错位怎么解决(解决办法放在代码下面)

    1.先看一下最终的效果图

    在这里插入图片描述
    在这里插入图片描述

    2. 来先看具体代码吧,设计的具体思路就放在代码下面哈哈哈ヾ(≧▽≦*)o

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>二级菜单</title>
    	<style>
       	  	/*去除网页原有的格式*/
    		* { margin:0; padding:0;}
    		/*去除标签前的圆点*/
    		ul, li { list-style:none;}
    		/*去除下划线*/
    		a { text-decoration:none;}
    		/*盛放二级菜单的盒子*/
    		.mxl_bigbox_10{
    			width: 620px;
    			height:300px;
    			background-color: pink;
    			margin: 15px auto auto  30%;
    			float:left;
    			position: relative;
    			padding-left:15px;
    			padding-top: 15px: 
    
    		}
    		ul li{float:left; }
    		ul li a{
    			width:120px;
    			height:30px;
    			font-size: 20px;
    			text-align: center;
    			font-family: 宋体;
    			line-height: 25px;
    			/*将元素显示为块级元素display:block;*/
    			display: block;
    			border-right:2px solid silver;
                border-bottom: 0.3px solid silver;
                background-color: #E8E8E8;
                color:black;
    
    
    		}
    		/*鼠标悬停改变背景颜色*/
    		ul li a:hover{background-color:aqua; }
    		/*display:none;用来隐藏二级菜单  */
    		ul li ul{
    			position: absolute;
    			display:none;
    		}
    		/*float:none;使二级菜单不左右浮动也是默认值*/
    		ul li ul li{
    			float: none;
    		}
    		ul li ul li a{
    				border-top:1px dashed silver; 
    		}
    		/*在鼠标移到li上的时候它下面的ul会显示*/	
    		ul li:hover ul{display:block;}
    
    
    
    	</style>
    		
    </head>
    <body>
    			
    	<div  class="mxl_bigbox_10">
    			<ul>
    				<li><a href="#">首页</a>
    					<ul>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    					</ul>					
    				</li>
    
    				<li><a href="">验收专栏</a>
    					 <ul>						
    							<li><a href="#">2级菜单</a></li>
    							<li><a href="#">2级菜单</a></li>
    							<li><a href="#">2级菜单</a></li>
    							<li><a href="#">2级菜单</a></li>
    							<li><a href="#">2级菜单</a></li>
    					 </ul>
    
    				</li>
    				
    				<li><a href="">专业概况</a>
    					<ul>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    					</ul>
    				</li>
    
    				<li><a href="">教学资源</a>
    					<ul>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    					</ul>
    				</li>
    
    				<li><a href="">获奖状况</a>
    					<ul>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    						<li><a href="#">2级菜单</a></li>
    					</ul>
    				</li>
    
    			</ul>
    
    	</div>
    <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可协议</a>进行许可。
    
    </body>
    </html>
    

    3.二级菜单出现错位解决办法如下:

    错位原因:再css样式里即内没有添加去掉网页原有属性的代码(* { margin:0; padding:0;}),接下来我把源代码里的 * { margin:0; padding:0;}注释掉来看看网页打开后的效果图:

    在这里插入图片描述

    很明显已经错位了!

    ヾ(≧▽≦*)o😊喜欢的话就留个赞吧!

    😊😊布局思路:通过 ul li ul li的嵌套以及使用div 、css 、a三种标签来一起实现二级菜单。

    具体步骤如下:

    1. 首先在body部分用div标签做一个盒子,在盒子内部(div内部) 用“<ul><li><a>一级菜单</a></li></ul>”生成一级菜单然, 但是此时所有一级菜单带式竖向排列的,每个一级菜单还需要在style内把一级菜单通过“display:block;”设置成块,再给他们加上边框;
    2.然后通过“float:left;”控制浮动,这样横向排列的一级菜单就好了;一些细节方面比如一级菜单的边框颜色、像素大小、背景色文字在框里的位置都得设置好。
    3.接着在一级菜单里嵌入二级菜单即<ul><li><a>一级菜单</a><ul><li><a>二级菜单</a></li></ul></li></ul>
    4.嵌入后接下来控制二级菜单的样式,通过绝对定位使二级菜单出现在一级菜单下然后隐藏即“{ position:absolute; display:none;}”,但是这时二级菜单还是横向排列的,只需用“float:none;”不让其左右浮动就可以完成。
    5.最后,当鼠标移动到一级菜单上时二级菜单这时时显示不出来的,还需要添加“ul li:hover ul{ display:block}”使二级菜单显示出来;下面的文字部分和图片部分是用两个小盒子,通过类选择器独立控制各自的样式。

    🎈🎈🎈注意点:盛放二级菜单的盒子宽度,要根据标签的宽度来决定 ;比如你的ul li {width: 60px;height:30px} 有六个一级菜单,那么60*6=360那么你的盒子的宽度要至少大于300左右;

    🎈🎈🎈 padding属性还会撑大盒子,所以在调节标签里的文字居中时尽量不要用padding,建议使用text-align:center;和line-height:多少px;一起使用,主要调节line-height,就可以;文字的大小尽量小点,不然还是会出现问题。

    展开全文
  • 本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码。分享给大家供大家参考。具体如下: 这是一款纯CSS菜单二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8、火狐等都支持,而且它还是学习CSS...
  • 本文实例讲述了js实现简洁大方的二级下拉菜单效果代码。分享给大家供大家参考。具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效果...
  • MIUI官网下拉二级菜单栏是一款基于jquery.backgroundpos.js和jquery-1.4.2.js制作的MIUI官网使用的下拉二级网站导航菜单。有首页、功能、下载、更多产品、应用商店、主题商店、小米桌面、小米系统、论坛等网站菜单...
  • html代码 软件开发网</a></dt> 特效</a> 教程</a> 资源</a> 模板</a> 资讯<
  • 在日常的生活中,想必大家都接触过下拉菜单的使用,这样为我们提供了极大的方便,那么下面看一下如何来制作吧。 one: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • jQ鼠标滑过显示二级下拉菜单代码jQ鼠标滑过显示二级下拉菜单代码
  • jquery鼠标滑过显示二级下拉菜单代码,代码完成可运行。包括html, js, css.
  • 本文实例为大家分享了bootstrap实现二级下拉菜单展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的按钮下拉菜单</title> <...
  • 本文实例讲述了AngularJS实现的select二级联动下拉菜单功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title><...
  • jQuery鼠标滑过显示二级下拉菜单代码
  • 一级菜单效果如图一所示 按键选项一 至 选项四是一级菜单 当点击选项一时 弹出二级菜单 效果如图二所示(其余一级菜单也有对应的二级菜单) ...二级菜单</a> </li> <li
  • 前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉菜单。 使用JQuery实现需要用到的知识有: 1)使用$(function(){…})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素...
  • jQuery 1.3.2 简单实现select二级联动jQuery 二级联动$(document).ready(function(){$("#province").change(function(){$("#province option").each(function(i,o){if($(this).attr("selected")){$(".city").hide();...
  • 工具是vs code 代码如下 <...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li{ ...
  • 我们以前收集了很多漂亮的CSS3菜单,尤其是多级下拉菜单,像纯CSS3垂直动画菜单、CSS3 Lava Lamp动画...今天我再来分享一款CSS3二级下拉动画菜单,这款CSS3菜单的特点是在菜单展开时,菜单的背景会出现滑动的动画效果。
  • 利用css制作二级下拉菜单 一目了然、通俗易懂——利用css制作二级下拉菜单
  • jquery导航条滑动下拉菜单_滑动显示二级下拉菜单 jquery导航条滑动下拉菜单_滑动显示二级下拉菜单 jquery导航条滑动下拉菜单_滑动显示二级下拉菜单 jquery导航条滑动下拉菜单_滑动显示二级下拉菜单

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,754
精华内容 10,301
关键字:

html二级下拉菜单