我创建了一个简单的导航栏,它可以工作,但也有重叠。
导航栏和主要元素内容都使用相对位置和绝对位置来工作
已经尝试过改变立场:在这里和那里绝对,似乎什么都不起作用。
它只是在打开菜单时保持重叠——它在主要内容中的图像和天后后面打开,所以你看不到菜单。
如何在打开下拉菜单时使其可见,并像任何下拉菜单一样打开/覆盖主要内容?
这是代码
我还创建了一个代码笔来了解我的意思,只需将鼠标悬停在菜单上即可。新闻
https://codepen.io/familias/pen/YzRVLWG
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>news</title>
<style>
super-newspaper {
display:grid;
grid-template-areas:
'navi'
'main';
}
nav {
grid-area:navi;
text-align:center;
padding-bottom:30px
}
main {
grid-area:main;
}
.mymenu {
position:relative;
display:inline-block;
}
.mymenu a {
position:relative;
display:inline-block;
}
.times {
display:none;
position:absolute;
width:auto;
}
.mymenu:hover .times
{display:block}
super-recent-news {
display:grid;
grid-template-areas:
'first second'
'third fourth';}
article {
display:block;
width:90%
}
article {
}
article figure {
position:relative;
margin:0;width:100%;
background-color:#000;
height:50px;
}
article figcaption {
position:absolute;
top:8px;
right:8px;
background-color:#121212;
color:#FFFFFF;
border-radius:3px;
padding:3px 6px 3px 6px
}
article img {
width:100%;background-color:#000;height:50px;
}
super-recent-news article:nth-child(1) {grid-area:first;}
super-recent-news article:nth-child(2) {grid-area:second;}
super-recent-news article:nth-child(3) {grid-area:third;}
super-recent-news article:nth-child(4) {grid-area:fourth;}
</style>
</head>
<body>
<super-newspaper>
<nav class="menu">
<div class="mymenu"><a href="#">News</a>
<div class="times">
<a href="#">World</a>
<a href="#">Europe</a>
<a href="#">Asia</a>
<a href="#">Africa</a>
<a href="#">Oceania</a>
<a href="#">North America</a>
<a href="#">South America</a>
</div></div>
</nav>
<main>
<super-recent-news>
<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>
<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>
<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>
<article>
<figure><img src="image.png"><figcaption>Politics</figcaption>
</figure>
</article>
</super-recent-news>
</main>
</super-newspaper>
</body>
</html>
