0

我一直在处理的 CSS 下拉菜单存在一些问题。

这是该网站的链接：rpg.vacau.com

有2个问题：

  1. 当您将鼠标悬停在齿轮上时，它不仅会下拉一个小菜单，还会下拉一个黑条，占据右侧的其余空间。

  2. 齿轮就在标题旁边，我希望它在右侧没有绝对定位，因为菜单是相对定位的。

差不多了，如何修复与菜单一起下拉的奇怪黑条，以及如何将齿轮和菜单移动到右侧？在此先感谢，希望这是有道理的。

索引.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;
}
4

2 回答 2

0

float: right只需给LI.

<li style="float: right;">

查看屏幕截图。

于 2013-06-13T16:07:10.827 回答
0

替换 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;
}
于 2013-06-13T16:17:01.773 回答