0
我正在为某人创建网站。在顶部，我有一个带链接和下拉菜单的酒吧，左边有一个标志。出于某种原因，图片不断弄乱下拉菜单。它功能完善，但视觉上很混乱。为了查看我的意思，将鼠标悬停在下拉菜单上，该按钮展开。添加图像会中断我的导航栏下拉菜单
我曾尝试将图像封装在div中，为图像设置边距和填充，并使用不同的图像，这些图像都不起作用。如果我将图片指向无效的网址，它可以正常工作，但显然我需要一张真实图片。
代码：
function hide(element) {
element.className += " hidden";
}
function unhide(element) {
element.className = element.className.replace(/\bhidden\b/, "");
}
function toggle(button) {
var list = document.getElementById(button.getAttribute("data-list"));
(list.className.search(/\bhidden\b/) > -1) ? unhide(list): hide(list);
window.onclick = function(e) {
if (!e.target.matches(".drop-button") && !e.target.matches(".drop-choices")) {
hide(list);
}
};
}#back-top {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 50px;
background-color: green;
}
#bar-top {
position: absolute;
display: table;
height: 50px;
top: 0;
left: 0;
right: 0;
padding: 0;
background-color: green;
}
.nav-link {
text-decoration: none;
}
.nav-option {
display: table-cell;
font-size: 16px;
top: 0;
color: white;
width: 200px;
cursor: pointer;
}
#nav-logo {
width: 40px;
height: 40px;
top: 2px;
padding: 0;
}
.drop-button {
margin: 0;
font-size: 16px;
color: white;
width: 100%;
height: 100%;
cursor: pointer;
border: none;
text-align: left;
background-color: inherit;
}
.nav-option:hover,
.nav-option:active,
.nav-option:focus,
.drop-button:hover,
.drop-button:active,
.drop-button:focus {
background-color: blue;
outline: none;
}
.drop-choices {
font-size: 16px;
overflow: auto;
max-height: calc(100vh - 50px);
display: block;
position: absolute;
background-color: lightgray;
min-width: 140px;
z-index: 5;
}
.drop-choices p {
color: black;
padding-top: 6px;
padding-bottom: 6px;
cursor: pointer;
margin: 0;
width: 188px;
text-align: left;
}
.drop-choices p:hover,
.drop-choices p:focus {
background-color: blue;
outline: none;
}
p.drop-title {
cursor: initial;
}
p.drop-title:hover {
background-color: #f9f9f9;
}
.hidden {
display: none;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home - Jessica Keirns</title>
<link type="text/css" rel="stylesheet" href="topbar.css" />
</head>
<body>
<div id="back-top">
<div id="bar-top">
<a href="/main.xhtml" class="nav-link">
<img src="https://www.thsp.co.uk/wp-content/uploads/2016/11/Icon-Placeholder.png" alt="Home" width="40px" height="40px" />
</a>
<div class="nav-option drop-down" data-list="test" onclick="toggle(this)">
<button class="drop-button">Dropdown</button>
<div id="test" class="drop-choices hidden">
<p tabindex="0" id="choice1">choice1</p>
<p tabindex="0" id="choice2">choice2</p>
</div>
</div>
<a href="/about.xhtml" class="nav-option nav-link">About Me</a>
</div>
</div>
<script type="application/javascript" src="drop.js"></script>
</body>
</html>
我一直没意识到'表row'的。我在某处找到了类似的代码，并且根据我的代码进行编码。感谢您的信息，我会尽快尝试。 'inline-block'是否将元素放在一行中？我没有意识到这一点，所以我没有尝试。 – PorygonZRocks
@PorygonZRocks对不起，我忘了更新片段中的CSS。现在我更新了它 – jafarbtech