CSS - 無法獲取單個li元素來顯示懸停中的div

Question

我想要一個下拉式登錄框（div class =「signin」），當用戶將鼠標懸停在導航欄的登錄部分上時（li class = 。「menuLogin）但是由於某種原因，我有很多的麻煩實現這一目標，即使它看似簡單

的登錄框設置如下：

.signin { 
... 
... 
display:none; 
} 

我會再假設，如果我想讓登錄框在懸停時可見，我會執行以下操作：

#nav > ul > li.menulogin:hover .signin{ 
    display:block; 
} 

但是，這和許多變化，我不能得到它的工作！

測試

#nav > ul > li.menulogin:hover{ 
    font-size:20px; 
} 

確實改變了導航欄的字體大小，所以這部分的作品。是我在哪裏說：

#nav > ul > li.menulogin:hover .signin{ 
} 

我在哪裏出錯？

非常感謝。

HTML如下：

<div id="nav"> 
    <ul> 
    <li class="menulogin"><a href="#">Login</a></li> 
    <div class="signin" popup=""> 
     <div class="inner"> 
     <div class="title"> SIGN IN </div> 
     <form method="post" action="www.google.com"> 
      <fieldset> 
      <div class="inputrow"><input type="text" class="box-input" id="usernameInput" 

       name="Login" placeholder="Username" /> </div> 
      <div class="inputrow"><input type="password" class="box-input" id="passInput" 

       name="Password" placeholder="Password" /> </div> 
      <div class="row"> <input type="submit" value="ENTER" class="button" /> 
      </div> 
      <div class="row"> <a href="/member/forgotpassword">Forgot 
       Password?</a> </div> 
      </fieldset> 
     </form> 
     </div> 
    </div> 
    <li><a href="#">En</a></li> 
    <li><a href="#">£</a></li> 
    <li><a href="#">Corporate</a></li> 
    <li><a href="#">Contact Us</a></li> 
    </ul> 
</div> 

CSS如下：

#nav ul { 
    width: 100%; 
    float: left; 
    margin: 0 0 6px 0; 
    padding: 0; 
    list-style: none; 
    background-color: #1c2d5f; 
    border-bottom: 1px solid #f3ddaa; 
    border-top: 1px solid #ccc; 
    font:16px Times New Roman, Times, serif; 
} 
#nav ul li { 
    float: right; 
} 
#nav ul li a { 
    display: block; 
    padding: 8px 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #e9cb73; 
    border-right: 1px solid #ccc; 
} 
#nav ul li a:hover{ 
    display:block; 
    color: #f3ddaa; 
    background-color: #253775; 
} 


#nav > ul > li.menulogin:hover .signin{ 

display:block; 

} 

/*LOGIN BOX*/ 
.signin { 
width: 212px;/*width of element*/ 
right: 0px;/*needed for position*/ 
top: 37px; /*height of navbar*/ 
border: solid; /*standard border*/ 
border-width: 1px 1px 1px 1px;/*standard border*/ 
border-color:#f3ddaa;/*standard border*/ 
position: absolute;/*ignores other elements for position*/ 
background: #1c2d5f;/*background colour*/ 
-webkit-box-shadow: 2px 2px 4px 0px;/*nice shadow effect*/ 
box-shadow: 2px 2px 4px 0px;/*nice shadow effect*/ 
display:none; 
} 

Answer 1

使用adjacent sibling combinator, +，以選擇.signin元件之前li.menulogin：

#nav > ul > li.menulogin:hover + .signin { 
    display:block; 
} 

WORKING EXAMPLE HERE

您試圖選擇一個.signin元素，該元素是li.menulogin的子元素。

+的使用假定元素是相鄰的。否則，您將使用general sibling combinator, ~，如果情況並非如此。

#nav > ul > li.menulogin:hover ~ .signin { 
    display:block; 
} 

另外值得一提的是，如果你要在它懸停在.signin元素將消失（因爲它在本例中確實以上）。爲了解決這個問題，徘徊過，當它（.signin:hover）

#nav > ul > li.menulogin:hover + .signin, .signin:hover { 
    display:block; 
} 

UPDATED EXAMPLE HERE