html - Div 未正确显示为导航的子菜单
问题描述
现在导航在全屏时不会在本例中显示,但在 iPad 模式下在 Chrome 上显示时正确显示,因此出于我的目的,这将起作用。
我之前已经完全制作了一个从顶部导航中弹出的子菜单,但是出于什么原因,这个让我很难过。
首先我想得很好,呵呵!你需要改变hoverableMenu{position:absolute};
和hoverable{position:relative};
和中提琴我就完了。但是,无论我做什么,当我有时,它都会一直向左移动float:left;
,即使我想,我也可以使用边距对位置进行硬编码,但这不是一个优雅的解决方案,我知道老实说,这只是飞过我的头顶。
任何和所有的帮助表示赞赏。
下面是我的最小可验证示例。
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*Mobile views*/
/*Tablet View*/
@media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<div id="seperator"></div>
<div id="content">
<nav>
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="teaching.html">Teaching</a>
<a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
<a href="research.html">Overview</a>
<a href="publications.html">Publications</a>
</div>
<a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
<a href="studentawards.html">Awards</a>
<a href="gallery.html">Gallery</a>
</div>
<a href="contact.html">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</nav>
</div>
我访问的资源:
https ://jsfiddle.net/davidpauljunior/pdcAF/1/
如何使子菜单浮动在 div 上?
无法点击下拉菜单中的菜单链接
编辑
在我的媒体查询下,我更改了以下内容。
div.hoverable{
display: relative;
}
div.hoverableMenu{
float:right;
display: absolute;
}
div.hoverable:focus > div.hoverableMenu{
top:1em;
left: 140px;
z-index: 99;
}
这样做之后,菜单现在相对于它们的父项弹出,但它们导致它们右侧的元素环绕到其余的中殿项目下方。而不是浮动在导航上的子菜单。:(
解决方案
你必须稍微改变你的结构ul li
,检查下面的代码
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*//////////*/
.topnav{
overflow: visible;
}
.topnav > li {
float: left;
list-style-type: none;
}
.topnav li {
list-style-type: none;
padding: 0;
position: relative;
}
.topnav > li > ul {
display: none;
margin: 0;
position: absolute;
left: 0;
padding: 0;
top: 40px;
}
.topnav > li:hover > ul {
display: block;
}
.topnav li {
}
.topnav:after {
content: "";
display: table;
clear: both;
}
/*//////////*/
/*Mobile views*/
/*Tablet View*/
@media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul class="topnav" id="myTopnav">
<li><a href="index.html">Home</a></li>
<li><a href="teaching.html">Teaching</a></li>
<li><a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu" style="
">
<li><a href="research.html">Overview</a></li>
<li><a href="publications.html">Publications</a></li>
</ul>
</li>
<li><a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu">
<li><a href="studentawards.html">Awards</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
推荐阅读
- c# - 页面加载时如何将 asp.net 网格视图代码与网格视图一起加载?
- javascript - react-table 中的条件单元格渲染
- node.js - 基于 Node.js 的命令行工具“force-dev-tool”在退出之前需要大量时间
- mysql - 如何检查列中的值并使用 sql 在表上删除/继续读取(选择)?
- c# - 嵌套类属性
- c# - Visual Studio App Center:“等待”运算符只能在异步方法中使用
- r - downloadHandler 没有产生所需的输出
- git - 如何在 Jenkins 的 workSpace/Slave 上禁用证书验证
- javascript - 图标不与 skycons 一起显示
- python - Python将回车解码为换行