码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率

导航栏的横向下拉菜单
收起
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
微信扫一扫
点击复制链接分享
- 邀请回答
- 编辑 收藏 删除 结题
- 收藏 举报
当前问题酬金
¥ 0 (可追加 ¥500)
支付方式
扫码支付
6条回答 默认 最新
- 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
Go 旅城通票 2015-01-27 01:57关注你默认的就是显示的啊。。增加下面2个样式,默认隐藏,li:hover的时候再显示出来
.menu2_div{margin:0px;font-size:13px;display:none}/*默认隐藏*/ .menu2 li:hover .menu2_div{display:block}/*hover时在显示*/
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容
- 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
JollyLee1127 2015-01-27 01:42关注.menu2{float:left;font-size: 16px;font-family: "微软雅黑";width: 760px;}
.menu2 ul{margin:0px;padding:0px;list-style-type:none;}
.menu2 ul li{float:left;text-align:center;width:119px;}
.menu2 ul li a{display:block;text-decoration:none;color:#000000; width:119px; height:40px;line-height:40px;}
.menu2 ul li:hover a{color:#FFFFFF;background:#FF6600;text-decoration:none;}
.menu2_div{margin:0px;font-size:13px;}
.menu2 ul li ul{width:476px;list-style-type:none;}
.menu2 ul li ul li{float:left;width:119px;text-align:center;}
.menu2 ul li:hover ul li a{background:#FF6600;color:#FFFFFF; width:119px;text-decoration:none;}
.menu2 ul li:hover ul li a:hover{background:#FF9900;color:#FFFFFF;text-decoration:none;}
.menu2 ul li a.current{background:#FF6600;color:#FFFFFF;}<div class="menu2"> <ul> <li><a href="#" class="current">首页</a></li> <li><a href="#">中心介绍</a> <div class="menu2_div"> <ul> <li><a href="#">中心概况</a></li> <li><a href="#">中心概况</a></li> <li><a href="#">中心概况</a></li> <li><a href="#">中心概况</a></li> </ul> </div> </li> <li><a href="#">实践教学</a> <div class="menu2_div"> <ul> <li><a href="#">教学理念</a></li> <li><a href="#">教学理念</a></li> <li><a href="#">教学理念</a></li> <li><a href="#">教学理念</a></li> </ul> </div> </li> <li><a href="#">教学管理</a> <div class="menu2_div"> <ul> <li><a href="#">成果展示</a></li> <li><a href="#">成果展示</a></li> <li><a href="#">成果展示</a></li> <li><a href="#">成果展示</a></li> </ul> </div> </li> <li><a href="#">管理制度</a> <div class="menu2_div"> <ul> <li><a href="#">规章制度</a></li> <li><a href="#">规章制度</a></li> <li><a href="#">规章制度</a></li> <li><a href="#">规章制度</a></li> </ul> </div> </li> <li><a href="#">学院管理</a> <div class="menu2_div"> <ul> <li><a href="#">管理学院</a></li> <li><a href="#">管理学院</a></li> <li><a href="#">管理学院</a></li> <li><a href="#">管理学院</a></li> </ul> </div> </li> </ul> </div>
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 1无用举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
JollyLee1127 2015-01-26 08:35关注.menu2{float:left;font-size: 16px;font-family: "微软雅黑";width: 760px;}
.menu2 ul{margin:0px;padding:0px;list-style-type:none;}
.menu2 ul li{float:left;text-align:center;width:119px;}
.menu2 ul li a{display:block;text-decoration:none;color:#000000; width:119px; height:40px;line-height:40px;}
.menu2 ul li:hover a{color:#FFFFFF;background:#FF6600;text-decoration:none;}
.menu2_div{margin:0px;font-size:13px;}
.menu2 ul li ul{width:476px;display:none;}
.menu2 ul li ul li{float:left;width:119px;text-align:center;}
.menu2 ul li:hover ul li a{background:#FF6600;color:#FFFFFF; width:119px;text-decoration:none;}
.menu2 ul li:hover ul li a:hover{background:#FF9900;color:#FFFFFF;text-decoration:none;}
.menu2 ul li a.current{background:#FF6600;color:#FFFFFF;}- 首页
-
中心介绍
</li> <li><a href="#">实践教学</a> <div class="menu2_div"> <ul> <li><a href="#">教学理念</a></li> <li><a href="#">教学理念</a></li> <li><a href="#">教学理念</a></li> <li><a href="#">教学理念</a></li> </ul> </div> </li> <li><a href="#">教学管理</a> <div class="menu2_div"> <ul> <li><a href="#">成果展示</a></li> <li><a href="#">成果展示</a></li> <li><a href="#">成果展示</a></li> <li><a href="#">成果展示</a></li> </ul> </div> </li> <li><a href="#">管理制度</a> <div class="menu2_div"> <ul> <li><a href="#">规章制度</a></li> <li><a href="#">规章制度</a></li> <li><a href="#">规章制度</a></li> <li><a href="#">规章制度</a></li> </ul> </div> </li> <li><a href="#">学院管理</a> <div class="menu2_div"> <ul> <li><a href="#">管理学院</a></li> <li><a href="#">管理学院</a></li> <li><a href="#">管理学院</a></li> <li><a href="#">管理学院</a></li> </ul> </div> </li> </ul> </div>
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
ZSC_LM 2015-01-26 09:13关注用的JS吗,是不是只加了onmouseover没有加onmouseout
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
Go 旅城通票 2015-01-26 09:31关注重新发你的代码,记得用工具栏上的</>格式化一下,要不看不到源代码。。
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容 - 关注
码龄 粉丝数 原力等级 --
- 被采纳
- 被点赞
- 采纳率
ZSC_LM 2015-01-26 09:45关注好吧。。原来这是提问出来的代码。。我还以为是回答呢。。
.menu2 ul li a{display:block;
这一行限定死了,display:block 当然就不会隐藏下拉菜单中的这些内容了
想要实现hover效果可以简单的加几句JS,改变display属性本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫
点击复制链接分享
评论按下Enter换行,Ctrl+Enter发表内容
报告相同问题?
- 2015-01-26 08:33回答 6 已采纳 你默认的就是显示的啊。。增加下面2个样式,默认隐藏,li:hover的时候再显示出来 ``` .menu2_div{margin:0px;font-size:13px;display
- 2021-11-20 09:25回答 1 已采纳 控制你的js方法就行了,把除了内容区域的地方都加上鼠标进入和出去的效果
- 2021-12-16 10:31回答 2 已采纳 我复制你的代码看的效果是默认一排的 你自定义的样式应该是有覆盖了,你可以把你的index。css先注释看看解决方案:1、检查class是否有重名2、如果需要放一排可以对父级写flex如:ul{disp
- 2021-06-09 11:49weixin_39657249的博客 css+div导航下拉二级菜单竖排效果如何改为横排?,在“下一站”有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起来,这样就在一行了。 下面是...
- 2022-05-08 16:52回答 3 已采纳 应该是给下拉区域显示的时候绝对定位,宽度给100%,适当的情况下可以按需求调整top、left、right、bottom
- 2022-01-19 10:11回答 1 已采纳 跟flask无关,建议你看看bootstrap的导航栏样例前端代码
- 2016-12-29 09:47回答 2 已采纳 问题已经解决了。将引用的bootstrap.min.css,jquery.min.js和bootstrap.min.js的三个文件全部全部放到本地。变成,和。
- 2019-07-04 00:05jQuery横向下拉导航菜单是一款基于jQuery实现的超酷纵向或者横向动态下拉导航菜单,鼠标滑过主菜单动态显示风格时尚的下拉菜单,菜单可以横向或者纵向显示。
- 2018-06-11 12:37回答 2 已采纳 First approach: Override overflow:hidden of .w3-bar by overflow:visible. Second approach: Change
- 2018-05-25 07:20回答 6 已采纳 ``` model.addAttribute("dep_list", dep_list); //把内容放到返回页面的model里面 return “你的页面”; //跳转到你的页面
- 2022-03-07 14:53回答 2 已采纳 F12看类名
- 2021-06-13 01:07无锡星晴侯鹏飞的博客 横向导航代码如下:横向导航菜单body{margin:0;}ul{list-style-type:none;background-color: #f3f3f3;position: fixed;overflow:hidden;margin:0;padding:0;width:100%;position:fixed;border-bottom:1px solid #e7...
- 2021-04-15 15:33回答 3 已采纳 bootstarp没有现成的,不如自己实现一个 https://v3.bootcss.com/javascript/#popovers 这个Popover 结合一下
- 2021-06-09 11:47小问题大学问的博客 代码如下:菜单项1 子菜单项11子菜单项12菜单项2子菜单项21子菜单项22菜单项3子菜单项31子菜单项32最外围的中元素即为菜单项1、菜单项2、菜单项3,下拉菜单分别在各主菜单之下,如果菜单最外层为ul,一层每个主菜单...
- 2021-06-09 11:48KarmaXXXL的博客 【实例简介】【实例截图】【核心代码】无标题文档*{margin:0;padding:0;}/*通用选择器样式*/body{font-family:"微软雅黑";}/*标签选择器样式,规定页面的基本字体类型为“微软雅黑”*/li{list-style-type:none;...
- 没有解决我的问题, 去提问
悬赏问题
- ¥15 PCL注册的选点等函数如何取消注册
- ¥15 问一下各位,为什么我用蓝牙直接发送模拟输入的数据,接收端显示乱码呢,米思齐软件上usb串口显示正常的字符串呢?
- ¥15 Python爬虫程序
- ¥15 crypto 这种的应该怎么找flag?
- ¥15 代码已写好,求帮我指出错误,有偿!
- ¥15 matlab+波形匹配算法
- ¥15 转录组分析做聚类树图时癌旁组被分到了癌组
- ¥15 大一Python字典
- ¥15 multisim电路设计(相关搜索:设计报告)
- ¥15 PC-lint Plus