如何在其他div被占用时影响其他div属性？
这是我在这里的第一篇文章，生病尝试尽可能清楚，并希望我遵循网站的规则。如何在其他div被占用时影响其他div属性？
不久前，我开始玩一些HTML/CSS，我很擅长但不够我猜，我希望在这里得到一些帮助。
我试图建立一个导航菜单和它的一个功能，我想它已经是当我将鼠标悬停在“户口”按钮，它应该分裂菜单在中间，展现出新部分用户可以登录他或她的帐户。
这是我走到这一步，出于某种原因，我不能让效果悬停在“户口”div但美国能源部的工作时，我申请的整个顶部div悬停效果（其中当“账户div是其中一部分）尝试了所有。‘链接’方式提出in this post，仍然一无所获......还有最后一件事：当我在.middle div做overflow: hidden;它增加了顶部和底部divs之间的空间
我非常感谢任何帮助，如果可以将它留在CSS水平l（没有任何jQuery或任何其他编码）
在此先感谢， 托尼。
.container {
width: 560px;
height: auto;
}
.top {
height: 50px;
background-color: red;
}
.top-L {
float: right;
padding: 5px 20px;
}
.top-R {
float: right;
padding: 5px 20px;
height: 50px;
display: block;
}
.middle {
height: 0px;
width: 560px;
overflow: hidden;
background-color: blue;
transition: .4s ease;
}
.bottom {
height: 50px;
background-color: green;
}
.top:hover + .middle {
height: 50px;
transition: .4s ease;
}
.middle:hover {
height: 50px;
}<html>
<body style="font-family: sans-serif; background-color: #ccc;">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="top">
<div class="top-L">Other</div>
<div class="top-R">Account</div>
</div>
<div class="middle">
<div>
<input type="text" placeholder="Enter Username" name="uname" required>
<input type="password" placeholder="Enter Password" name="psw" required>
</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
修订ANSWER
你所寻找的是不可能的，当前的结构。但是，我们可以通过Click来代替Hover。 随着一些变化:)。这不是一个完美的解决方案，但应该适合你的情况。
*{
\t box-sizing: border-box;
}
.container {
width: 560px;
height: auto;
}
.top {
/* height: 50px; */
background-color: red;
\t display: flex;
\t justify-content: flex-end;
}
.top-L label, .top-R label{
\t padding: 20px;
}
.top-L {
order: 1;
\t padding: 20px;
}
.top-R {
padding: 20px;
}
.middle {
height: 0px;
width: 560px;
overflow: hidden;
background-color: blue;
transition: .4s ease;
}
.bottom {
height: 50px;
background-color: green;
}
.top:hover + .middle {
/* height: 50px; */
transition: .4s ease;
\t
}
#account{
\t display: none;
}
#account:checked + .middle{
\t height: 50px;
\t padding: 10px;
}
.middle:hover {
/* height: 50px; */
}<div class="container">
<div class="top">
<div class="top-L">Other</div>
<div class="top-R" ><label for="account">Account</label> </div>
</div>
<input type="checkbox" id="account"/>
<div class="middle">
<div>
\t \t \t
<input type="text" placeholder="Enter Username" name="uname" required>
<input type="password" placeholder="Enter Password" name="psw" required>
</div>
</div>
<div class="bottom"></div>
</div>
*它应该分裂中间的菜单，并显示一个新的部分，用户可以登录到他或她的帐户* – Gerard
非常感谢你！它现在令人惊叹！ –
如果我是正确的，这将帮助你，
nav > ul > li {
display: inline-block
}
nav > ul > li ul {
visibility: hidden;
position: absolute;
top: 105%;
left: 0;
transition: 0.2s 1s;
}
nav > ul > li:hover ul {
visibility: visible;
transition-delay: 0s;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
width: 100px;
background: #eee;
margin: 2px;
position: relative;
padding: 10px;
}
nav a {
display: block;
}
body {
padding: 10px;
}<nav>
<ul>
<li><a href="">Last</a></li>
<li><a href="">one</a></li>
<li><a href="">is</a></li>
<li>
Dropdown
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></a></li>
</ul>
</li>
</ul>
</nav>不是我在找什么，不过谢谢 –
@Tony铁道部对现有的CSS做了一些修正。我相信这是你想要的。
.top-R {
float: right;
padding: 5px 20px;
display: block;
}
和
.middle div {
padding-left: 10px;
padding-top: 15px;
}
谢谢！这确实帮助了差距:) –
很高兴我能帮忙！ :-) – vagelis
你不能只用纯CSS按钮的效果，需要使用Javascript为。原因是登录框不是按钮的同级，而是其父级。 – Gerard
@Gerard技术上你可以根据需求使用绝对位置。 – William
@Tony，如果我点击而不是悬停怎么办？ – Aslam