0

ドロップダウン メニューを修正しようとしていますが、強調表示された色と背景色/サイズに問題があります。

ホバーすると、希望するようにボタン全体がオレンジ色で覆われておらず、希望しない背景から灰色が残っています。

問題の 1 つは、モバイル用とコンピューター用に 2 つのスタイル シートを使用しているという事実かもしれません。

HTML:

<div id="nav">
  <ul id="menu">
    <li id="active"><a href="index.html" id="current">Home</a></li>
    <li><a href="about.html">About Revelstoke</a></li>
    <li><a href="#">Ticker Rates</a></li>
    <li><a href="#">Snow School</a>
      <ul id="sub-menu">
        <li><a href="#">Kids Lessons</a></li>
        <li><a href="#">Adult Lessons</a></li>
        <li><a href="#">First Tracks</a></li>
      </ul>
    </li>
    <li><a href="#">Weather</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Trail Maps</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>  
</div><!--close nav-->

CSS (コンピューター):

#nav {
    background-color:#eee;
    height: 33px;
    border-top: solid black 2px;
    border-bottom: solid black 2px;
    min-width: 1000px;
}

#nav #active a {
    font-weight: bold;
    color: #ffffff;
    background-color: #0160a2;
    padding: 5px 15px 8px 15px;
}

#nav ul {
    text-align: left;
    font-size: 18px;
    background-color: #eee;
}

#nav ul li {
    display: block;
    position: relative;
    float: left;
    line-height: 24px;
}

#nav ul li a {
    display:inline;
    padding:5px 10px 8px 10px;
    background-color: #eee;
}

#nav li ul {
    display: none;
}

#nav li:hover ul {
    display: block;
    position: absolute;
    margin-top: 6px;
    padding: 0;
    width: 97px;
    height: 82px;
}

#nav li:hover li {
    font-size: 14px;
}

#nav ul li a:hover {
    background-color: #ff8a00;
    color: #000000;
}

#nav ul li ul li a{
    padding:5px;
}

#nav ul li ul li a:hover{
    padding:5px;
    width: 97px;
    height: 82px;
}

CSS (モバイル):

#nav {
    background-color:#eee;
}

#nav ul {
    text-align:center;
    font-size: 18px;
}

#nav ul li {
    list-style-type:none;
    border-top: 3px solid white;
}

#nav ul li a {
    color: #000000;
    display:block;
    padding:13px 0;
    text-decoration:none;
    font-weight: bold;
}

#nav ul li a:hover {
    background-color: #0096ff;
    font-weight: bold;
    color: white;
}

#nav #active a {
    background-color: #01385e;
    font-weight: bold;
    color: white;
}
4

1 に答える 1

0

あなたの質問を理解した場合、これは解決策であるはずですhttp://jsfiddle.net/GcDGv/2/ (私は非モバイルCSSでのみ作業しました)、これが私がそれを修正した方法です:

  1. heightに関連するクラスからすべてのプロパティを削除しましたsub-menu。それらは自動計算できます。

  2. widthのli要素を にsub-menu変更すると100%、領域全体が使用されるようになります。

  3. sub-menu要素としてリンクを作成してblock、上下のマージン/パディングが必要に応じて機能するようにします。そして、最後のスタイルから削除されwidthたheightプロパティul li ul li a:hover

于 2013-06-09T20:20:17.033 に答える