javascript - 如何消除菜单项与其下拉菜单之间的差距?
问题描述
我正在使用我在网上找到的 CSS/HTML 下拉列表作为起点。我正在调整它。当我使浏览器变小(我使用的是 Chrome)时,顶行和下拉菜单之间有一个间隙(见截图)。需要一些帮助来消除这个差距。
这是我用作参考的网站。
谢谢您的帮助!
它看起来像什么:
我想要的是:
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
img,
form,
fieldset,
input,
textarea,
blockquote {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #909eab url(bg.png);
font-family: Helvetica, sans-serif;
font-size: 18px;
line-height: 24px;
}
nav {
margin: 100px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover>ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
解决方案
推荐阅读
- docusignapi - 文本标签分组
- python - 两个熊猫数据框的两个平均值如何,但前提是两个单元格都可用?
- git - 如何在旧提交上提交更改并将其置于历史之上
- pyiron - 在 Windows 下运行 pyiron 会导致 .pyiron 配置出错
- javascript - 如何分隔 div 按钮和复选框?
- python - 查找最近邻变化算法
- python - SQL Server 2017 中的 pyodbc 连接
- bash - 简单的 bash 脚本在默认 VPC 中启动 EC2 实例时起作用,但在启动到自定义 VPC 时不起作用
- firebase - 我应该如何在 Firebase 中构建我的数据
- objective-c - 如何在 Swift 中访问 NSApplicationLaunchUserNotificationKey?