Question

我在使用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>

web.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;
}

Answer 1

只需向float: right提供LI。

<li style="float: right;">

查看屏幕截图。

Answer 2

替换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;
}

CSS下拉菜单问题和定位

2 个答案: