• 所有问题

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

    如题所述

    举报该问题
    推荐答案   2016-05-08

    您要的效果应该是下面这样的：



    示例代码如下：

    <!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>纯 CSS 多级菜单</title>
      <style>
        .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==);}
      </style></head><body>

      <div id="mainnav" class="menu">
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="expand"><a href="#">Link</a>
            <ul>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="expand"><a href="#">据个例子</a>
                <ul>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li class="expand"><a href="#">LinkLink</a>
                    <ul>
                      <li class="expand"><a href="#">Link</a>
                        <ul>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Link</a></li>
                      <li class="expand"><span>span 菜单项</span>
                        <ul>
                          <li><span>span 菜单项</span></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>
      </body>
      </html>

    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2016-05-05
    无脚本，纯HTML和 CSS 实现的多级下拉菜单，在非 IE 内核浏览器和 IE8+ 表现完美。

    <img src="https://pic1.zhimg.com/6d55a0bbd720bbf8a618c94fb8bd6908_b.jpg" data-rawheight="503" data-rawwidth="800" class="origin_image zh-lightbox-thumb" width="800" data-original="https://pic1.zhimg.com/6d55a0bbd720bbf8a618c94fb8bd6908_r.jpg">

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

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>纯 CSS 多级菜单</title>
    <style>
    .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==);}
    </style>
    </head>

    <body>

    <div id="mainnav" class="menu">
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="expand"><a href="#">Link</a>
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="expand"><a href="#">很长很长很长很长很长很长很长很长很长很长</a>
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="expand"><a href="#">LinkLink</a>
    <ul>
    <li class="expand"><a href="#">Link</a>
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li class="expand"><span>span 菜单项</span>
    <ul>
    <li><span>span 菜单项</span></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
    </div>

    </body>
    </html>
    第2个回答  2016-05-05
    参考下面写的代码：
    <html> <head> <title></title> <style>*{margin:0;padding:0;} ul,li{ list-style-type:none; padding:0; margin:0; } #nav li a{ display:block; width:100px; text-align:center; text-decoration:none; color:#ffffff; background-color:#000000; } #nav li{ position:relative; margin-bottom:2px;float:left;margin-right:5px; } #nav li ul{ position:absolute; left:10px; top:20px; display:none;width:100px; } #nav li:hover ul{ display:block; } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li><li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>团队主力</li><li>团队成员</li></ul></li></ul> </body></html>
    相似回答
    CSS技巧分享:如何用css制作横排二级下拉菜单答：看到网站的导航按钮很炫酷不会怎么办？本片教程介绍如何使用css制作网站导航横排二级下拉菜单 打开Notepad++，先输入个页面框架 ！DOCTYPE html html xmlns="http://www.w3.org/1999/xhtml" hade /hade body /body 框架好了，那么就该定义页面的title，关键词keyword，和描述description meta ...
    div+css制作横向下拉式菜单方面的问题答：/* 1. 清除ul默认样式 */ ul { padding: 0;margin: 0;list-style: none;} /* 2. 设置水平方向主菜单, 设置子菜单弹出位置相对于当前父菜单项 */ li { float: left; /* 产生水平菜单 */ position: relative; /* position为非static时才能让子菜单弹出位置相对当前菜单项 */ width: 10e...
    如何通过html和css完成下拉菜单的制作答：首先需要打开自己电脑上的DW软件，新建一个html页面，然后将其保存在桌面上。接下来我们需要在body里面添加DIV标签，并在其内使用ul无序列表和li标签制作一个一级菜单栏，代码和浏览器的效果如下面两张图片所示。因为菜单栏一般都是有链接的，我们就需要为每个li标签添加一个a标签，并增加适当的样式。
    html+css下拉菜单怎么制作答：使用HTML和CSS制作下拉菜单的方法如下：1、编写带有div导航的html代码：2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。4、在“关于我们...
    html下拉菜单怎么写答：1、创建CSS文件。完成HTML框架代码后，我们需要使用样式表来实现下列菜单功能。我们使用CSS选择器来定位HTML中的菜单项，因此无需在HTML中添加额外的ID或class属性。我们通过UL内嵌UL的方式来定位子菜单，并使用display:none;属性 将其隐藏。在鼠标悬停在LI元素上时，我们需要将其转换为block模式，重新显示...
    html 怎么做鼠标悬浮菜单上的选项能出现下拉菜单答：html做鼠标悬浮菜单上的选项能出现下拉菜单，CSS+JS做出此效果。<body>内代码为：<UL id=fm> <LI><A href="#">一级菜单栏目</A> <UL> <LI><A href="#">一级菜单目录</A></LI> <LI><A href="#">一级菜单目录</A></LI> <LI><A href="#">一级菜单目录</A></LI> <LI>...
    使用html和css实现元素下拉框的方法答：第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。未显示时属性为（ display: none;）显示时属性为（display: block;），结果就是能够显示与隐藏，但是动画效果没...
    这样类似的二级菜单用CSS和html怎么实现?视频时间 17:41
    网页制作怎么用css制作菜单网页制作怎么用css制作菜单答：css技巧分享:如何用css制作横向二级下拉菜单 工具/材料记事本 浏览器 打开Notepad，先输入一个页面框架。好了，接下来就该定义页面的标题、关键词、描述了。content=http-equiv=内容类型 填充:0；} .焦ul阿利:盘旋{ 颜色:#红色；} ul，li{ 列表样式:无；} 一个{ 文字-装饰:无；} .焦 边框:5px...
    大家正在搜
    用css和js实现下拉菜单css实现下拉菜单的思路是下拉菜单css菜鸟html中下拉菜单怎么做html做下拉菜单栏html下拉菜单代码html5下拉菜单代码html二级下拉菜单html搜索下拉菜单
    相关问题
    如何通过html和css完成下拉菜单的制作
    如何通过html和css完成下拉菜单的制作
    如何使用HTML和CSS制作下拉菜单
    如何使用HTML和CSS制作下拉菜单
    用HTML和CSS怎么做表单里面有下拉
    如何通过html和css完成下拉菜单的制作
    如何利用html和css实现一个下拉页面
    html+css+javascript 菜单单击式下拉菜单怎...