使用CSS在div上應用可見性效果

Question

我在實現我的網站項目中的預期效果時遇到了困難。

我想懸停我的指針，然後出現註冊框。我沒有菜單在登錄和產品上下拉菜單。但我無法登記。請幫忙。 下面是代碼：

<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行是doest似乎工作的行。感謝您的幫助

Answer 1

正確的這部分

<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> 

Answer 2

'登錄'鏈接是彈出窗口的同級，都包含在同一個<li>內，而'註冊'鏈接和彈出窗口分別在<li> s中。如果你用相同的方式設置它，它可以正常工作。

http://jsfiddle.net/GrERY/