菜单导航栏不显示 [英] Menu nav bar doesn't show
问题描述
做了一个简单的响应式标题/导航，当我将鼠标悬停在菜单选项卡上时，我不确定为什么我的菜单下拉菜单没有出现。
i'我在第36行隐藏了我的导航，然后重新出现在第53行。
请帮忙。
< b>我尝试了什么：
< pre>< / pre> < pre lang =HTML> < html lang = zh < span class =code-keyword>>
< head >
< meta charset = UTF-8 >
< meta name = viewport content = width = device-width，initial-scale = 1.0 >
< meta http-equiv = X-UA兼容 content = ie = edge >
< title > 简单下拉导航练习< / title >
< / head >
<！ - 尝试制作手机菜单下拉 - >
< 正文 >
< div class = container-fluid >
< div class = wrapper >
<！ - 徽标和移动菜单 - >
< 标题 >
< div class = logo >
< img src = https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png / >
< / div >
< a href = ＃ > 菜单< ; / a >
< / header >
< nav >
< ul >
< li > < a href = ＃ > 主页< / a > < / li >
< li > < a < span class =code-attribute> href = ＃ > 关于< / a > < / li >
< li > < a href = ＃ > 联系< <跨度 class =code-leadattribute> / a > < / li >
< / ul >
< / nav >
< / div >
< / div >
< / body >
< / html >
正文 {
margin ： 0;
padding ： 0;
}
标题 {
background-color ： ＃333;
color ： < span class =code-keyword> white;
display ： < span class =code-keyword> flex;
align-items ： center;
justify-content ：< /跨度> space-between;
padding ： 10px;
}
header 。 logo img {
max-width ： 100％;
width ： 50px;
height ： auto;
}
标头 > a {
padding ： 10px;
background-color ： ＃555;
text-decoration ： none;
颜色 ： #fff;
}
header > a：hover ， header > a：focus {
color ： ＃1c1c1c;
background ： #ccc;
}
nav ul {
margin ： < span class =code-keyword> 0;
padding ： < span class =code-keyword> 0;
background-color ： ＃222;
display ： 无;
}
nav li {
padding ： 10px;
text-align ： center;
}
nav a {
text-decoration ： none;
color ： #fff;
}
nav li：悬停 {
background-color ： ＃333;
}
header > ; a：focus nav ul {
display ： block;
}
@ media scree n 和 （min-width： 768px）{
header > a {
display ： 无;
}
nav ul {
display ： flex;
justify-content ： flex-end;
背景 ： none;
position ： relative;
top ： -40px;
}
nav li {
display ： inline-block;
}
nav a {
padding ： 10px;
}
}
Quote：
header> a：focus nav ul
该选择器针对<$内的< ul>标记c $ c>< nav> 标记，位于焦点< a>标记内，该标记是<$的直接后代c $ c>< header> 标签。
现在看一下标记的结构：
div [class =wrapper] $ b $b┊$ b $b┝header $ b $b┊┊$ b $b┊┝div[class =logo] $ b $b┊ ┊$ b $b┊└一个[菜单] $ b $b┊$ b $b└nav$ b $b┊$ b $b└ul
<您尝试定位的code>< nav> 未嵌套在< a>下;它甚至没有嵌套在< header>下;它是< header>的兄弟。
制作菜单工作，您需要复制菜单触发器下的< nav>。但是，您无法在另一个< a>标记内嵌入< a>标记，因此您' d需要更改菜单触发元素。例如：
< div class = wrapper >
<！ - 徽标和移动菜单 - >
< header >
< div class = logo >
< img src = https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png / >
< / div >
< div class = menu tabindex = 0 >
菜单
< nav >
< ul >
< li > < a href = ＃ > 主页< / a > < / li >
< li > < a href = ＃ > 关于< / a > < / li >
< li > < a href = ＃ > 联系< / a > < / li >
< / ul >
< / div >
< span class =code-keyword>< / header >
< nav >
< ul >
< li > < a href = ＃ > 主页< / a > < / li >
< li > < a href = ＃ > 关于< / a > < / li >
< li < span class =code-keyword>> < a href = ＃ > 联系< / a > < / li >
< / ul >
< / nav >
< / div >
标题 > 。 menu：focus nav ul {
display ： 阻止;
}
注意：你在菜单触发器上需要tabindex，因为没有它就无法关注< div>。
在CSS中添加以下媒体查询并检查
@media screen和（min-width：130px）和（max-width： 767px）{
nav ul {display：block;}
}
问题：特定宽度nav ul是display：none....
添加（！important）标签结束显示：阻止！重要;
made a simple responsive header/nav and i'm not sure why my menu dropdown doesn't appear when i hover over the menu tab.
i've hidden my nav under line 36 and make it reappear line 53.
Pls help.
What I have tried:
<pre></pre>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple dropdown Nav Exercise</title>
</head>
<!-- try making a mobile menu dropdown -->
<body>
<div class="container-fluid">
<div class="wrapper">
<!-- logo and mobile menu -->
<header>
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" />
</div>
<a href="#">Menu</a>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
}
header .logo img {
max-width: 100%;
width: 50px;
height: auto;
}
header > a {
padding: 10px;
background-color: #555;
text-decoration: none;
color: #fff;
}
header > a:hover, header > a:focus {
color: #1c1c1c;
background: #ccc;
}
nav ul {
margin: 0;
padding: 0;
background-color: #222;
display: none;
}
nav li {
padding: 10px;
text-align: center;
}
nav a {
text-decoration: none;
color: #fff;
}
nav li:hover {
background-color: #333;
}
header > a:focus nav ul {
display: block;
}
@media screen and (min-width: 768px) {
header > a {
display: none;
}
nav ul {
display: flex;
justify-content: flex-end;
background: none;
position: relative;
top: -40px;
}
nav li {
display: inline-block;
}
nav a {
padding: 10px;
}
}Quote:
header > a:focus nav ul
That selector targets a<ul>tag inside a<nav>tag, which is inside a focussed<a>tag, which is a direct descendant of a<header>tag.
Now look at the structure of your markup:
div [class="wrapper"] ┊ ┝ header ┊ ┊ ┊ ┝ div [class="logo"] ┊ ┊ ┊ └ a [menu] ┊ └ nav ┊ └ ul
The<nav>you're trying to target isn't nested under the<a>; it isn't even nested under the<header>; it's a sibling of the<header>.
To make the menu work, you'd need to duplicate the<nav>under the menu trigger. However, you can't nest an<a>tag inside another<a>tag, so you'd need to change the menu trigger element. For example:
<div class="wrapper"> <!-- logo and mobile menu --> <header> <div class="logo"> <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" /> </div> <div class="menu" tabindex="0"> Menu <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div>
header > .menu:focus nav ul { display: block; }
NB: You need thetabindexon the menu trigger, since a<div>can't be focussed without it.
Add below media query in CSS and check
@media screen and (min-width: 130px) and (max-width: 767px) {
nav ul{display:block;}
}
Problem: On particular width "nav ul" is "display:none" ....
Add (!important) tag end of display:block !important;
这篇关于菜单导航栏不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
