0

Web サイト プロジェクトで期待する効果を達成するのに苦労しています。

ポインターをホバーすると、登録ボックスが表示されます。ログインと製品のドロップダウンメニューがありません。しかし、私は登録でそれを行うことはできません。助けてください。 コードは次のとおりです。

<div class="menu">
    <!-- enter code here -->
    <ul>
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="products.html">Products</a>
            <ul>
                <li><a href="books.html">Books</a></li>
                <li><a href="magazine">Magazines</a></li>
                <li><a href="audio.html">Audio CDs</a></li>
                <li><a href="dvd.html">DVDs</a></li>
            </ul>
        </li>
        <li><a href="">login</a>
            <ul >
                <li><input type="text" name="username" value="" placeholder="Username" style="color:#939393" ></li>
                <li><input type="password" name`enter code here`="password" value="" placeholder="Password" style="color:#939393" ></li>
                <li><input type="button" value="login" style="color:#939393;width:158px" ></li>
            </ul>
        </li>
        <li><a href="#register">Register</a></li>
        <ul>
            <!--This is the div I want to show-->     
            <div id="register">
                <input type="text" placeholder="First Name" value="">
            </div>
        </ul>
    </ul>  

ここに私のCSSがあります。[製品] タブと [ログイン] タブが機能していることに注意してください。

.menu { padding:38px 0 0 0; margin:0 ; width:380px;  float:left; font-size:13px}
.menu ul {list-style:none; margin:0;padding:0; }
.menu li {float:left;position:relative; }
.menu li ul{ position:absolute; top:30px; left:0; visibility:hidden; background:url(images/main_bg.gif);}
.menu li:hover ul{visibility:visible; z-index:20;}
.menu li ul li {float:none;}
.menu ul li { float:left; margin:0; padding:0 10px; border:0;}
.menu ul li a { float:left; margin:0; padding:12px 0; color:#939393; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;}
.menu ul li a:hover { color:#ddd;}
.menu ul li a.active { color:#ddd;}

.menu li:hover *#register{visibility:visible; z-index:20;}
#register {position:absolute; top:30px; left:0; visibility:hidden; background:url(images/main_bg.gif);}

最後の 2 行は、動作していないようです。ご協力ありがとうございました

4

2 に答える 2

1

「ログイン」リンクはポップアップの兄弟であり、どちらも同じ 内に含まれてい<li>ますが、「登録」リンクとポップアップは別<li>の にあります。同じように設定すれば問題なく動作します。

http://jsfiddle.net/GrERY/

于 2013-02-06T12:17:38.537 に答える
0

このセクションを修正する

<li><a href="#register">Register</a></li>
<ul>
    <!--This is the div I want to show-->     
    <div id="register">
        <input type="text" placeholder="First Name" value="">
    </div>
</ul>

<li><a href="#register">Register</a>
    <ul>
        <li>
            <div id="register">
                <input type="text" placeholder="First Name" value="">
            </div>
        </li>
    </ul>
</li>
于 2013-02-06T12:23:44.367 に答える