-4

CSS ドロップダウン メニューを (サイト ページへのインクルードとして) 使用して Web サイトを設計しています。メニュー項目にカーソルを合わせると、ドロップダウン ボックスが表示され、マウスを下にドラッグして選択できます。IE と Firefox では正常に動作しますが、Chrome ではメニュー項目にカーソルを合わせてマウスを下にドラッグすると、コンテナー div (マウスがホバーしている場所の近くにはありません) がドロップダウン ボックスに重なって消えます。Chrome で [ソースを表示] をクリックすると、div に気付きました。ドロップダウン メニューの CSS を添付し、ドロップダウン メニューへのリンクを含めました。

問題があると思われる CSS は、ロゴ、タイトル、およびログイン フォームを保持する #banner クラスです。#bannerContainer が #banner を保持するように設定して、任意の画面解像度で中央に配置できるようにしました (以下のコードを参照)。この問題の助けをいただければ幸いです。ありがとうございました！

CSS: http://bridgedeck.org/newsite/pro_dropdown_n1.css 

#bannercontainer { /* centers banner items on any screen resolution */
position:absolute;
left:0px;
top:0px;
width:100%;
height:105px;
z-index:2000;
background-image: url(images/bannerOrigBlue.png);

}

#banner { /* Holds wheel, mmp text and members login form*/
position:relative;
width:1000px;
height:100px;
z-index:0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

}

HTML:

<div id="bannercontainer">
<div id="banner"> <!-- holds wheel, MMP text, and members login -->
    <a href="http://www.bridgedeck.org/newsite"><img src="images/wheellogocolor2.png" height="140" width="140"></a>
    <img class="mmpText" src="images/title_n1-2.png" alt="MMP" align="top"/>
        <div class="loginDiv">
            <form action="https://secure.bridgedeck.org/LoggedInHome.asp"  style="font-family:Calibri" method="post">
            <table>
            <tr>
                <td><b>Members Login</b></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input type="text" name="Email" width="80px"></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="password" width="80px"></td>
            </tr>
            <tr>
              <td height="29"><input type="submit" value="Login" class="submit"></td>
            </tr>
            </table>
            </form>
  </div>
</div>
4

1 に答える 1

0 
<pre><code>
     #nav li.top {
      display: block;
      float: left;
      height: 35px;
      padding-left: 5px;
      padding-right: 5px;
     }
</code></pre>

pro_dropdown_n1.css の 119 行目の高さを変更します

高さで作成されたギャップに注意してください。

于 2012-12-27T15:54:25.807 に答える