尝试使用CSS显示菜单 [英] Trying to show a menu using CSS
本文介绍了尝试使用CSS显示菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题是我的页面中有一个 nav 部分，我想只显示父项，在悬停时需要显示子项。这有效但它会将页面的其余部分向下移动。这不是我想要的。我可以使用仅使用CSS 来显示以下内容中的子内容吗？
我的页面是这样的：
My problem is that I have a nav section in my page and I want to only show the parent items, on hover the child items need to be displayed. That works but it then moves the remainder of the page down. This is not what I want. Can I make it, using CSS only, to show the child content over what follows?
My page is thus:
<!DOCTYPE html>
<html lang="en">
<title>Test Menu</title>
<meta charset="utf-8">
<style>
.drop-menu {
display: inline-block;
min-width: 100px;
text-align: left;
padding: 10px 10px;
cursor: pointer;
border: 1px solid #f6f0e4;
}
.drop-menu:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
width: 200px;
padding: 10px 10px;
margin-left: -11px;
margin-top: 10px;
border: 1px solid #fff;
}
.sub-menu li {
list-style-type: none;
display: block;
border-bottom: 1px dotted #eaeaea;
}
.sub-menu li:hover {
border-bottom: 1px dotted #bababa;
}
</style>
<body>
<header>
<h1>Test Menu</h1>
</header>
<nav>
<ul>
<li class="drop-menu">
<div>Parent</div>
<ul class="sub-menu">
<li>Child 2</li>
<li>Child 1</li>
</ul>
</li>
</ul>
</nav>
<section>
<h2>Content</h2>
<article>
<h3>Article</h3>
<h6>by Author</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
对于 .drop- menu：hover ，我尝试了不同的显示样式，但看起来我遗漏了一些东西。
For the .drop-menu:hover, I have tried different display styles, but it appears I'm missing something or other.
推荐答案
尝试使用可能有帮助的位置。
Try using position, that may help.
/*add these to the css style*/
.drop-menu {
position:relative;
}
.sub-menu {
position:absolute;
background-color:white;
}
这是jsfiddle您添加的示例： http://jsfiddle.net/mL28mohg/ [ ^ ]
这篇关于尝试使用CSS显示菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
