html - 当我将鼠标悬停在下拉菜单上时，下拉菜单消失了

Question

我是网络编程新手!下面是我的 CSS 和 HTML 片段。我正在尝试构建一个网络应用程序，这是我的主页，希望这个小问题得到解决。当我将鼠标悬停在悬停菜单上时会出现悬停菜单，但是当我想转到菜单列表时它会消失!

• 我尝试过其他解决方案，但我的似乎有些不同!*
• 在我包含标题之前，代码运行良好。

 body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  text-align: center;
  background: white;
}

.header p {
  font-size: 22px;
}

.header h1 {
  font-size: 50px;
  color: lightseagreen;
}

ul.navbar {
  overflow: hidden;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 0;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.67);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

ul.navbar li {
  float: left;
  display: block;
  cursor: pointer;
  position: relative;
}

ul.navbar li a {
  padding: 18px;
  font-family: "Open Sans";
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  font-size: 18px;
  display: block;
}


/* To represent the active link*/

.active {
  background-color: rgba(133, 133, 133, 0.56);
  color: white;
}


/* Hover style*/

ul.navbar li a:hover:not(.active) {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: darkgray;
}


/*dropdown menu*/

ul.dropdown {
  position: absolute;
  height: 72px;
  padding: 0px;
  right: 0px;
  visibility: hidden;
  transform: translateY(-2em);
  z-index: 900;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}


/*dropdown menu*/

ul.dropdown li {
  min-width: 160px;
  height: auto;
  margin: 0;
}


/*dropdown menu list*/

ul.dropdown li a {
  background-color: rgba(0, 0, 0, 0.67);
  color: white;
  text-transform: capitalize;
}


/*hover style*/

ul.dropdown li:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.6);
  color: darkgray;
  cursor: pointer;
}


/*hover visibility*/

ul.navbar li:hover>ul.dropdown {
  visibility: visible;
  display: block;
  opacity: 1;
  z-index: 100;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}


/*Responsive navbar*/

@media screen and (max-width: 600px) {
  ul.navbar li {
    float: none;
    width: 100%;
    height: auto;
    position: relative;
  }
}

HTML

<div class="header">
  <h1>EduWebb</h1>
  <p>Online education platform to manage your institution</p>
</div>
<ul class="navbar">
  <li><a class="active" href="#">Home</a></li>
  <li><a href="#">Contact</a></li>
  <li style="float:right">
    <a href="#">Login</a>
    <ul class="dropdown">
      <li><a href="#">Admin</a></li>
      <li><a href="#">Faculty</a></li>
      <li><a href="#">Student</a></li>
      <li><a href="#">Parent</a></li>
    </ul>
  </li>
</ul>
<div style="padding:40px 0px 0px 0px;margin-top:0;background-color:white;height:1500px;">
    <h1>Fixed Top Navigation Bar</h1>
    <h2>Scroll this page to see the effect</h2>
    <h2>The navigation bar will stay at the top of the page while scrolling</h2>

    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
    <p>Some text some text some text some text..</p>
</div>

Answer 1

它对我有用。

HTML:

<div class="header">
<h1>EduWebb</h1>
<p>Online education platform to manage your institution</p>
</div>
<nav id="nav_menu">
  <ul class="navbar" >
    <li><a class="active" href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li style="float:right">
      <a href="#" id="hoverLogin">Login</a>
      <ul>
        <li><a href="#">Admin</a></li>
        <li><a href="#">Faculty</a></li>
        <li><a href="#">Student</a></li>
        <li><a href="#">Parent</a></li>
      </ul>
     </li>
  </ul>
</nav>

CSS:

    body {
  margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.header {
 text-align: center;
    background: white;
}

.header p {
    font-size: 22px;
}

.header h1 {
 font-size: 50px;
    color: lightseagreen;
}

#nav_menu {
    clear: left;
}
#nav_menu ul {
    list-style: none;
    position: relative;
}
#nav_menu ul li {
    float: left;
    width: 15%;                  
}
#nav_menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
}
#nav_menu ul ul li ul {
    display: none;
    position: absolute;
    left: -25%;
    top:0;
}
#nav_menu ul ul li {
    float: none;
}


#nav_menu ul li:hover > ul {
    display: block;
}
#nav_menu > ul::after {
    clear: both;
    display: block;
}
#nav_menu ul {
    margin: 0;
    padding: 0;
}
#nav_menu ul li:hover ul {
    width: 100%;
}
#nav_menu ul li a {
    text-align: center;
    display: block;
    padding: .7em 0;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.67);
    color:white;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
#nav_menu ul li a.current {
    color: #2a0000;
    text-shadow: 1px black;
}

#nav_menu ul li a#first_navbar {
    border-left: 0 solid red;
}


#nav_menu ul li a:hover, #nav_menu ul li a:focus {
    color: white;
    border: 1px solid white;
}

解决这个问题的另一个好方法是使用 bootstrap。希望对您有所帮助。