html - 当我将鼠标悬停在下拉菜单上时它消失了
问题描述
我是网络编程新手!下面是我的 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>
解决方案
它对我有用。
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;
}
解决这个问题的另一个好方法是使用引导程序。希望它有所帮助。
推荐阅读
- wireshark - 在 Fiddler 中读取 Wireshark 捕获以获取非标准端口
- visual-studio - Show 3.0 Framework in TargetFramework on Visual Studio 2017
- netsuite - 从发票日期 URL 中检索 ID
- html - 根据模型中的变化值显示/隐藏元素
- javascript - 如何使用另一个 textarea 编辑 textarea 值?
- c# - AWS X-Ray 导致我的应用程序从 ASP.NET MVC 代码中抛出 NullReferenceException
- visual-studio-code - 是否有默认的 vscode 备份或文件恢复系统?
- python - 为什么我用scrapy而不是html得到这些奇怪的字符?
- r - ggplot2中旋转图例标题的垂直对齐
- c# - 如何使用 jQuery 从 C# 代码中填充 HTML 选择框(下拉列表)