导航栏下拉项目不保持可见
Posted
技术标签:
【中文标题】导航栏下拉项目不保持可见【英文标题】：Navigation Bar Drop Down Items don't stay visible 【发布时间】：2018-12-26 18:49:45 【问题描述】：终于把这一切都布置好了，运行起来，看起来就像我想要的那样，在过去的 3 天里，我试图弄清楚为什么当你尝试从下拉菜单中选择一个项目时菜单会消失。我不知所措。 我能够得到的最接近的是更改 ul uldisplay: block; 但是，当我这样做时，它会一直显示，而不仅仅是悬停。 我已尝试尽可能回滚，但仍然找不到我更改的位置或内容，因为它曾经可以正常工作。帮助！
html：
<!DOCTYPE html>
<html>
<head>
<title>TestSite®</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/octab.png" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<!--BEGIN HEADER-->
<body>
<div class="titlebar">
<div id="content" style="text-align:right">
Controls Technical Support: 866-918-1100
</div>
</div>
<div id="barcontent">
<img src="images/AAON_WattMasterLogo.png" >
<nav>
<ul>
<li>
<a href="">First</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
</ul>
</li>
<li>
<a href="">Second</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
</ul>
</li>
<li>
<a href="">Third</a>
</li>
<li>
<a href="">Fourth</a>
</li>
<li>
<a href="">Fifth</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="content">
page content
</div>
</body>
CSS：
@import url(//fonts.googleapis.com/css?family=Volkhov:700,700italic,400italic,400);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@font-face
font-family : "'Oswald'";
font-style : normal;
font-weight : 400;
src : local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/Y_TKV6o8WovbUd3m_X9aAA.ttf) format('truetype');
.err
font-family : Verdana, Helvetica, sans-serif;
font-size : 12px;
color: red;
body
font-family: Arial,Helvetica,sans-serif;
background-color: #F6F6F6;
margin: 0 auto;
#content
max-width: 1175px;
margin: 10px auto;
#barcontent
max-width: 1175px;
margin: 10px auto;
#barcontent img
width: 12%;
.titlebar
background-color: #e6e6e6;
display: inline-block;
width: 100%;
/*NAVIGATION BAR CSS*/
nav
display: flex;
/*background-color: white;*/
width: 85%;
float: right;
/*navbar link color*/
a
color: black;
text-decoration: none;
display: block;
/*top bar selections*/
ul
background: #fff;
float: left;
border: 5px solid #eeeeee;
list-style: none;
width: 100%;
margin: 10px auto;
height: 50px;
line-height: 50px;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap;
float:right;
/*top bar division of selections*/
li
position: relative;
list-style: none;
display: inline;
float: left;
width: inherit;
text-align: center;
border-right: 1px solid #eeeeee;
ul li:hover >a
background:#1475B3;
color: white;
list-style-type: none;
ul ul:hover
display: block;
ul ul li
display: block;
padding: 10px 0px;
color: #a9a9a9;
text-transform: uppercase;
font: 11px/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
background: linear-gradient(to bottom,#f7f7f7 0%,#ffffff 100%);
width: 100%;
ul ul
position: absolute;
left: 0;
top: 100%;
display: none;
border: none;
/*sets color of drop down links when hovered over*/
ul ul li:hover
background:#1475B3;
ul ul li:hover > a
color:white;
display: block;
li:hover > ul
display: block;
p
clear: left;
padding-top: 1em;
@media only screen and (max-width: 768px)
nav
display: flex;
/*background-color: white;*/
width: 100%;
float: right;
#barcontent img
width: 50%;
display: block;
margin: auto;
【问题讨论】：
【参考方案1】：它只是因为缺少 href 值而消失了。在屏幕截图中查看
如果不想登陆任何其他页面，应该链接这个。我希望能帮助你。
<a href="#">Link 1</a>
【讨论】：
以上是关于导航栏下拉项目不保持可见的主要内容，如果未能解决你的问题，请参考以下文章