Question

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

我尝试了其他解决方案，但我的似乎有所不同！*
在添加标题之前，代码运行良好。

 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：

dataset_id

CSS：

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

另一种解决此问题的好方法是使用引导程序。希望能有所帮助。

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

1 个答案: