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

 我来答
3个回答
#热议# 空调使用不当可能引发哪些疾病？
xhbest
2016-05-08 · TA获得超过5957个赞
知道大有可为答主
回答量：1583
采纳率：0%
帮助的人：1902万
我也去答题访问个人页
展开全部

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



示例代码如下：

<!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>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
丿占戈灬龙哥
2016-05-05 · 知道合伙人软件行家
丿占戈灬龙哥
知道合伙人软件行家
采纳数：479 获赞数：1174

向TA提问 私信TA
展开全部
无脚本，纯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>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
育知同创教育
2016-05-05 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
展开全部
参考下面写的代码：
<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>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（1）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式