作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的网站主页上有 1 个侧边菜单。有些列表有子菜单。在悬停时我想显示它。首先,我不显示它,然后在悬停时显示它,但它没有显示。
#menu {
width: 15%;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
position: absolute;
left:100%
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Dashboard</li>
<li>Employee >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Leave</li>
<li>Salary</li>
<li>Change Password</li>
</ul>
</div>
最佳答案
#menu {
width: 150px;
height: 100%;
background: #424242;
color: white;
float: left;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
list-style: none;
font-size: 20px;
padding: 15px 20px;
cursor: pointer;
}
#menu li:hover {
background-color: #90CAF9;
}
#menu li.active {
background-color: #2196F3;
}
#menu ul li ul {
display: none;
}
#menu ul li.submenu {
position: relative
}
#menu ul li.submenu ul {
position: absolute;
left: 150px;
width: 200px;
top: 0;
background: #333
}
#menu ul li.submenu:hover ul {
display: inline-block
}
<div id="menu">
<ul>
<li onClick="Dashboard();">Dashboard</li>
<li class="submenu">Employee >
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Leave</li>
<li class="submenu">Salary
<ul>
<li>Add Employee</li>
<li>Employee View</li>
</ul>
</li>
<li>Change Password</li>
</ul>
</div>
还将 .submenu
类添加到子菜单下拉父级 li
。
关于html - 如何在html和css中的侧边菜单中创建子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51379516/
我正在创建自己的网站。使用无序列表制作我自己的标题 + 导航栏。 我遇到的问题是标题没有延伸到浏览器的边缘。唯一可行的方法是在 css“header”中使用。 position:absolute; 我
我是一名优秀的程序员,十分优秀!