我在使用 CSS 下拉菜单时遇到了一些问题。
这是该站点的链接:rpg.vacau.com
有两个问题:
当您将鼠标悬停在齿轮上时，它不仅会下拉一个小菜单，还会下拉一个占据右侧剩余空间的黑色条。
齿轮就在标题的旁边，我希望它在右侧而不是绝对定位，因为菜单是相对定位的。
差不多了，我该如何修复随菜单一起下拉的奇怪黑条，以及如何将齿轮和菜单移动到右侧？在此先感谢，并希望这是有道理的。
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lite RPG</title>
<link rel="stylesheet" type="text/css" href="/css/web.css" />
<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
</head>
<body>
<nav>
<ul>
<li><a id="title" href="#">iON»</a></li>
<li><a id="settings" href="#"><img src="/images/settings.png" height="20"
width="20" /></a>
<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">Stuff</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
网络.css
body, ul {
margin: 0;
padding: 0;
}
nav ul {
background-color: #1b1b1b;
display: table;
position: relative;
list-style: none;
top: 0;
height: 50px;
width: 100%;
}
nav ul li {
float: left;
}
nav ul li a {
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 65px;
font-family: "Champagne & Limousines";
font-size: 16px;
color: #ffffff;
text-decoration: none;
background-color: #1b1b1b;
}
nav ul li a:hover {
background-color: #292929;
}
nav #title {
font-family: Lobster;
font-size: 36px;
line-height: 50px;
border-right: 1px solid #ffffff;
}
nav #settings {
top: 0px;
left: 1000px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
最佳答案
在您的 CSS 文件中替换以下 2 个条件
nav ul ul {
display: none;
position: absolute;
top: 100%;
right: 0px;
width: auto;
}
nav ul ul li {
float: left;
position: relative;
clear: both;
}
和 li你想发送到右边，添加一个float: right; CSS 规则。例如:
<li style="float: right;">
编辑
要在鼠标位于子菜单内时保持图标突出显示，
nav li:hover #menu {
background-color: #292929;
}
关于html - CSS下拉菜单问题和定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17091610/