0
我試圖製作一個小型登錄框，當您將鼠標懸停在菜單欄中的登錄項上時，會打開，請記住，用戶不必去另一個頁面登錄，但我無法得到它的工作。 請幫助如何製作將鼠標懸停在菜單項上時打開的登錄框
body {
background-image: url("back.jpg");
background-attachment: fixed;
}
#container {
height: 1000px;
}
#head {
position: absolute;
height: 150px;
width: 100%;
background-color: #ffffff;
right: 0px;
left: 0px;
top: 0px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navigationmenu-main {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.navigationmenu-parent {
float: left;
}
.navigationmenu-child {
display: inline-block;
color: white;
width: 50px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.navigationmenu-child:hover {
background-color: #111;
}
.navigationmenu-child:hover + .navigationmenu-line {
width: 100%;
}
.navigationmenu-line {
height: 3px;
background-color: red;
width: 0%;
-webkit-transition: width .3s;
-webkit-transition-timing-function: ease;
}
#main {
position: relative;
height: 700px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
top: 155px;
bottom: 100px;
box-shadow: 4px 4px 3px 1px #4d4d4d;
}
#logo-image {
position: relative;
margin-top: 40px;
margin-left: 40px;
}
#logo-image:hover {
-webkit-animation: blur 0.5s ease-in;
}
@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
-webkit-filter: blur(1px);
filter: blur(2px);
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
}
.login-parent {
float: right;
}
.login-child {
display: inline-block;
color: white;
width: 60px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.login-child:hover {
background-color: #111;
}
.login-child:hover + .navigationmenu-line {
width: 100%;
}
#loginbox {
display: block;
visibility: hidden;
position: absolute;
top: 132px;
right: 90px;
z-index: 999;
background: #a6a6a6;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
border-radius: 3px 0 3px 3px;
-webkit-transition: padding .3s;
}
.loginchild:hover + .loginbox {
visibility: visible;
}
#loginform {
padding: 5px;
}
#loginelement {
padding: 5px;
}<!DOCTYPE html>
<title>
Le Meridian | A home away from home
</title>
<body>
<div id="container">
<div id="head">
<img src="logo.png" id="logo-image" height="20%" width="20%">
<ul id="nav_bar" class="navigationmenu-main">
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">A</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">B</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">C</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">D</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">E</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">F</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
<a href="" class="navigationmenu-child">G</a>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child">Sign Up</div>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child" id="trigger">Login ▼</div>
<div class="navigationmenu-line">
</div>
<div id="loginbox">
<form id="loginform">
<input type="text" name="email" id="loginelement">
<br>
<br>
<input type="password" name="password" id="loginelement">
<br>
<br>
<input type="submit" name="loginsubmit" id="loginelement">
<input type="checkbox" name="loggedin" id="loginelement"> Stay Signed In
</form>
</div>
</li>
</ul>
</div>
<div id="main">
dsa
</div>
</div>
</body>
什麼是應該當用戶停止懸停在菜單項的情況發生？ –