找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2713|回复: 12

[求助] div菜单嵌套问题

[复制链接]
发表于 2016-4-21 09:39:37 | 显示全部楼层 |阅读模式
30体力
QQ图片20160421093731.png

菜单鼠标经过弹出下拉框
下拉框背景全屏
子菜单左侧跟主菜单左侧对齐

怎么写div嵌套呢

 提示:您可以先修改部分代码再运行

最佳答案

查看完整内容

试着写了一个: [html] jQuery menu test /* css reset */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, span, a, b, strong, object, iframe, label, img, blockquote, ins, del, select, form, input, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, su ...
发表于 2016-4-21 09:39:38 | 显示全部楼层
试着写了一个:

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

 楼主| 发表于 2016-4-21 09:52:06 | 显示全部楼层
下拉框背景width全屏
height随子菜单高度调整
回复

使用道具 举报

发表于 2016-4-21 10:32:47 | 显示全部楼层
这种情况用js实现起来好一些
回复

使用道具 举报

 楼主| 发表于 2016-4-21 10:51:00 | 显示全部楼层
AllanWang 发表于 2016-4-21 10:32
这种情况用js实现起来好一些

前辈,帮写个js试试呢,我不会写js
回复

使用道具 举报

发表于 2016-4-21 11:22:17 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  6.     <meta name="renderer" content="webkit" />
  7.     <title></title>
  8.     <meta name="keywords" content="" />
  9.     <meta name="description" content="" />
  10. </head>

  11. <body>
  12. <style>
  13. *{margin:0; padding:0; font-size:12px; font: 12px Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, \5B8B\4F53; list-style:none;}
  14. .nav{background-color:#333; height:30px; margin:10px 0 0 10px;}
  15. .nav li{float:left; width:100px; height:30px;}
  16. .nav li h2{color:#fff; width:100px; line-height:30px; cursor:pointer; text-align:center;}
  17. .nav li dl{position:absolute; width:100%; left:0; background-color:#399; display:none; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; overflow:hidden;}
  18. .nav li.nav-1 dl{padding-left:10px; *width:expression(document.body.scrollWidth-10);}
  19. .nav li.nav-2 dl{padding-left:110px; *width:expression(document.body.scrollWidth-110);}
  20. .nav li.nav-3 dl{padding-left:210px; *width:expression(document.body.scrollWidth-210);}
  21. .nav li.nav-4 dl{padding-left:310px; *width:expression(document.body.scrollWidth-310);}
  22. .nav li:hover h2{background-color:#666;}
  23. .nav li:hover dl{display:block;}
  24. .nav li dl dd{height:30px; float:left; width:100px; text-align:center; line-height:30px; color:#fff; cursor:pointer;}
  25. .nav li dl dd:hover{background-color:#36F;}
  26. </style>
  27. <div class="nav">
  28.         <ul>
  29.             <li class="nav-1">
  30.                 <h2>菜单一</h2>
  31.             <dl>
  32.                     <dd>菜单一一</dd>
  33.                 <dd>菜单一二</dd>
  34.                 <dd>菜单一三</dd>
  35.                 <dd>菜单一四</dd>
  36.             </dl>
  37.         </li>
  38.         <li class="nav-2">
  39.                 <h2>菜单二</h2>
  40.             <dl>
  41.                     <dd>菜单二一</dd>
  42.                 <dd>菜单二二</dd>
  43.                 <dd>菜单二三</dd>
  44.                 <dd>菜单二四</dd>
  45.             </dl>
  46.         </li>
  47.         <li class="nav-3">
  48.                 <h2>菜单三</h2>
  49.             <dl>
  50.                     <dd>菜单三一</dd>
  51.                 <dd>菜单三二</dd>
  52.                 <dd>菜单三三</dd>
  53.                 <dd>菜单三四</dd>
  54.             </dl>
  55.         </li>
  56.         <li class="nav-4">
  57.                 <h2>菜单四</h2>
  58.             <dl>
  59.                     <dd>菜单四一</dd>
  60.                 <dd>菜单四二</dd>
  61.                 <dd>菜单四三</dd>
  62.                 <dd>菜单四四</dd>
  63.             </dl>
  64.         </li>
  65.     </ul>
  66. </div>

  67. </body>
  68. </html>
复制代码
回复

使用道具 举报

发表于 2016-4-22 12:20:35 | 显示全部楼层
为什么一定要CSS写  找一段js就能搞定
回复

使用道具 举报

发表于 2016-4-22 20:45:35 | 显示全部楼层
感谢分享!学习啦!赞一个
回复

使用道具 举报

 楼主| 发表于 2016-4-26 14:11:02 | 显示全部楼层
baihe107 发表于 2016-4-22 16:01
试着写了一个:
[html]

能不能一组一组的显示
而不是一次性全部显示?
回复

使用道具 举报

发表于 2016-4-26 14:18:03 | 显示全部楼层
本帖最后由 sunritz 于 2016-4-26 14:19 编辑

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

发表于 2016-4-26 17:33:25 | 显示全部楼层
一组一组的显示,显然版主的效果更好。
回复

使用道具 举报

 楼主| 发表于 2016-4-27 10:17:31 | 显示全部楼层

二级导航的背景可以全屏显示吗?
回复

使用道具 举报

 楼主| 发表于 2016-4-27 16:56:38 | 显示全部楼层
[quote]baihe107 发表于 2016-4-22 16:01
试着写了一个:

 提示:您可以先修改部分代码再运行


这样的话可以达到我的目的,但是背景高度赋值失败,是不是写错了?
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-12-6 04:50 , Processed in 0.068469 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表