php - 在菜单中使用滚动时不显示子菜单
问题描述
nav#desktop-nav ul li > ul {
margin-top: 0;
text-align: left;
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
transform: scaleY(0);
transform-origin: 0 0 0;
transition: all 0.5s ease 0s;
width: 16em;
z-index: 99999;
background: #002147;
padding: 0;
left: -2em;
overflow:auto;
max-height:20em;
}
nav#desktop-nav li.has-child-menu {
position: relative;
}
nav#desktop-nav li.has-child-menu > a {
color: #ffffff;
}
nav#desktop-nav li.has-child-menu > a:after {
font-family: 'FontAwesome';
content: "\f105";
float: right;
}
nav#desktop-nav li.has-child-menu > ul.thired-level {
position: absolute;
left: 240px;
top: 0;
opacity: 0;
transform: scaleY(0);
transform-origin: 0 0 0;
transition: all 0.5s ease 0s;
}
nav#desktop-nav li.has-child-menu > ul.thired-level li a {
color: #ffffff;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3 ease-out;
-ms-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
}
nav#desktop-nav li.has-child-menu:hover ul.thired-level {
opacity: 1;
transform: scaleY(1);
visibility: visible;
}
<nav id="desktop-nav">
<ul>
<li>
<a href="javascript:void(0)">Courses</a>
<ul id="hash-li">
<li class="top-divider"><i class="fa fa-caret-up"></i></li>
<?php
$this->db->select('*');
$this->db->from('courses');
$this->db->limit(15);
$query = $this->db->get();
$result = $query->result_array();
foreach($result as $row)
{
echo "
<li class='has-child-menu'>
<a href='javascript:void(0)' class='link' id='".$row['id']."'>".$row['main_course_name']."</a>";
?>
<ul class="thired-level"></ul>
</li>
<?php
}
?>
<li class="bottom-divider"><i class="fa fa-caret-down"></i></li>
</ul>
</li>
</ul>
</nav>
在这段代码中,我创建了一个多级菜单,但现在我使用时会发生什么
overflow:auto;
max-height:20em;
滚动条正在显示,但是当我将鼠标悬停在菜单上时,子菜单不显示,但不使用滚动条子菜单显示我对此一无所知。我在哪里做错了?那么我该如何解决这个问题?请帮助我。
谢谢你
解决方案
推荐阅读
- python - 如何使 PyCharm 折叠(折叠)字典构造函数`dict()`?
- linux - 显示命令的特定列
- javascript - Chrome调试器 - 如何在不输入功能的情况下转到下一行?
- javascript - d3 force layout - 如何创建更合理的节点结构
- css - 如果我在使用视口单元时更改浏览器缩放,有没有办法调整文本大小
- arrays - 只需一次通过即可使用来自 shell 数组的输入修改 JSON 数组
- php - 我如何从这个 SOAPXML 中获取 sessionid
- sql - 显示罗斯文数据库中订单金额最高的客户
- github - github markdown 拆分源表行
- django - 当我尝试在 django admin 中添加新类别时,/admin/mediaportalapp/category/add/ 处的 OperationalError