0

私が取り組んできた css ドロップダウン メニューに問題があります。

サイトへのリンクは次のとおりです: rpg.vacau.com

2 つの問題があります。

  1. 歯車にカーソルを合わせると、小さなメニューがドロップダウンするだけでなく、右側の残りのスペースを占める黒いバーがドロップダウンします.

  2. 歯車はタイトルのすぐ隣にありますが、メニューが相対的に配置されているため、絶対配置なしで右側に配置したいと考えています。

メニューと一緒にドロップダウンする奇妙な黒いバーを修正するにはどうすればよいですか? また、歯車とメニューを右側に移動するにはどうすればよいでしょうか? 事前に感謝します。これが理にかなっていることを願っています。

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;
}
4

2 に答える 2

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 に答える