jquery - HTML CSS 和 jquery:带有水平子菜单的菜单
问题描述
我正在研究这个 HTMl、CSS 和一些 javascript。我正在尝试创建带有子菜单的菜单,因此当我将鼠标悬停在菜单上时,我希望子菜单以绝对位置显示在下方。我的主菜单是工作,但子菜单不像我想要的那样工作。当我将鼠标悬停在菜单上时,子菜单会显示,但只显示第一个单词,其余内容未显示。下面是我的图像和代码以及我想要实现的目标。请问有什么帮助吗?
下面是 HTML 代码和 CSS
body {
padding: 0;
margin: 0;
}
.container-fluid.wrapper {
flex-direction: column;
padding-bottom: 0px;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-item {
color: #000;
text-decoration: none;
display: inline;
overflow: hidden;
}
.dropdown {
float: left;
position: relative;
}
.nav-item .dropdown-content {
color: #000;
float: left;
position: absolute;
display: none;
z-index: 1;
left: 0;
top: 10px;
width: 100% !important;
}
.nav-item .dropdown-content a {
float: left;
color: white;
text-decoration: none;
display: inline;
}
.nav-item .dropdown-content a{
display: inline !important;
}
.nav-item:hover {
color: #FFF;
background: red !important;}
.nav-item:hover a{
color: #FFF !important;
}
.navbar-nav li:hover .dropdown-content {
display: block;
}
.navbar-nav .dropdown-content a:hover {
text-decoration: underline;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container-fluid wrapper p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<div class="dropdown">
<a class="nav-link" href="#">Women <span class="sr-only">(current)</span></a>
<div class="dropdown-content">
<a href="#">Computer Science</a>
<a href="#">Math</a>
<a href="#">Other</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Children</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Man</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="conta-fluid">
</div>
</body>
</html>
解决方案
你只需要改变一些事情:
你已经放在有按钮position: relative
的容器上。dropdown
这使得当您绝对定位菜单时,它将被容器剪切。所以我已经从
.dropdown {
float: left;
}
此外,我编辑了菜单:
.nav-item .dropdown-content {
...
background-color: red;
top: 80px;
}
插入红色,使其在背景中突出,就像示例一样,并在页面上80px
从顶部给它一个绝对位置。
body {
padding: 0;
margin: 0;
}
.container-fluid.wrapper {
flex-direction: column;
padding-bottom: 0px;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-item {
color: #000;
text-decoration: none;
display: inline;
overflow: hidden;
}
.dropdown {
float: left;
}
.nav-item .dropdown-content {
background-color: red;
color: #000;
float: left;
position: absolute;
display: none;
z-index: 2;
left: 0;
top: 80px;
width: 100% !important;
}
.nav-item .dropdown-content a {
float: left;
color: white;
text-decoration: none;
display: inline;
}
.nav-item .dropdown-content a {
display: inline !important;
}
.nav-item:hover {
color: #FFF;
background: red !important;
}
.nav-item:hover a {
color: #FFF !important;
}
.navbar-nav li:hover .dropdown-content {
display: block;
}
.navbar-nav .dropdown-content a:hover {
text-decoration: underline;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container-fluid wrapper p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<div class="dropdown">
<a class="nav-link" href="#">Women <span class="sr-only">(current)</span></a>
<div class="dropdown-content">
<a href="#">Computer Science</a>
<a href="#">Math</a>
<a href="#">Other</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Children</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Man</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="conta-fluid">
</div>
</body>
</html>
推荐阅读
- java - 在 Java Springboot 中为 mySQL 自定义生成的具有持久序列的列值
- algorithm - 如何在块算法中显示“if operator in for operator”?
- core-audio - PCM中的音频帧样本类型?
- c# - Kubectl 以交互方式应用 .NET Core 控制台应用程序,并在 Kubernetes 上退出 Console.ReadLine
- javascript - 我无法捕获 Select2 事件 - 我怀疑我使用了错误的 jquery 选择器
- google-chrome - MediaRecorder Chrome 编解码器/容器无法在移动设备或 Safari 上播放
- powershell - Powershell脚本将文件从一个位置移动到另一个位置,然后将消息框显示到我们网络上的另一台计算机
- symfony - 如何修复“key too long”错误并生成 Doctrine 迁移表?
- python - “numpy.ndarray”对象没有属性“fbind”
- css - 使用 Viusal Studio 2019 构建项目时,CSS 文件恢复为未修改版本