如何解决链接在下拉菜单中的位置
问题描述：
我想创建一个菜单，我将鼠标悬停在一个按钮上，一串子链接将出现在下面。但是，当我尝试在一行中执行多个按钮时，假设我将鼠标悬停在第二个按钮上，它的链接仍然出现在第一个按钮下方。如何解决链接在下拉菜单中的位置
下面的代码：
HTML
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
<title>Vezba</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script/script.js"></script>
</head>
<body>
<h1>Website</h1>
<header>
<ul>
<li><a class="fb" href="https://Facebook.com"></a></li>
<li><a class="reddit" href="https://Reddit.com"></a></li>
<li><a class="yt" href="https://YouTube.com"></a></li>
</ul>
</header>
<nav>
<div class="dd">
<button id="btn">First</button>
<div class="ddb">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<button id="btn2">Second</button>
<div class="ddb2">
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</div>
</nav>
<br />
<br />
<article>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<input type="button" value="Submit" onclick="Message();"/>
</body>
</html>
CSS
body
{
background-color:beige;
}
header
{
text-align:center;
}
ul
{
display:inline-block;
}
li
{
list-style-type:none;
float:left;
padding:5px;
text-align:center;
}
a:link,a:visited,a:hover,a:active
{
background-size:cover;
background-repeat:no-repeat;
color: white;
padding: 15px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a.fb:link, a.fb:visited,a.fb:hover, a.fb:active {
background-image:url(../img/fb.png);
}
a.reddit:link, a.reddit:visited,a.reddit:hover, a.reddit:active {
background-image:url(../img/reddit.png);
}
a.yt:link, a.yt:visited,a.yt:hover, a.yt:active {
background-image:url(../img/yt.png);
}
nav
{
font-size:10px;
background-color:gray;
}
.dd
{
display: inline-block;
float:left;
position:relative;
}
.dd button
{
width:100px;
}
.ddb, .ddb2 {
display:none;
color: black;
text-decoration: none;
background-color:gray;
position:absolute;
}
.ddb a, .ddb2 a{
color: black;
padding: 12px 16px;
text-decoration: none;
text-align:center;
display: block;
}
/*.dd:hover .ddb {
display:grid;
padding-bottom:10px;
}*/
article
{
border: 1px solid black;
border-radius:10px;
font-size:9px;
margin-right:200px;
padding:2px;
}
button
{
border: 1px solid black;
background-color:black;
color:white;
}
h1
{
text-align:left;
font-size:15px;
font-family:Andalus;
}
的JavaScript/JQuery的
$(document).ready(function()
{
$("#btn").on({
mouseenter: function() {
$(".ddb").show();
},
mouseleave: function() {
$(".ddb").hide();
}
});
$("#btn2").on({
mouseenter: function() {
$(".ddb2").show();
},
mouseleave: function() {
$(".ddb2").hide();
}
});
});
function Message()
{
alert("Ordered!");
}
或者它会更容易，我添加了它的jsfiddle：
https://jsfiddle.net/gwwxuvka/
同样，麻烦的部分是下面的按钮，丢失的图片菜单部分工作正常。我能摆脱这种混乱的最佳状态是，第一个按钮链接正常显示，第二个按钮链接跨越按钮区域时跨过。
答
这种风格的常见方法是在其自己的容器中有相应的下拉菜单，该容器有position: relative;。然后，在下拉菜单上应用position: absolute; top: 100%; left: 0;，它应该很好。
这也将消除对任何JavaScript的需求，因为您可以使用CSS选择器（例如.menu-button:hover .ddb2）来了解何时应显示下拉菜单。
例如...
HTML
<span class="menu-button">
<button id="btn2">Second</button>
<div class="ddb2">
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</span>
CSS
.menu-button {
position: relative;
}
.ddb2 {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.menu-button:hover .ddb2 {
display: block;
}
这也消除了具有不同类的名字，使所有的代码看起来需要更好一点。
谢谢，我只是使用jQuery的做法，这就是为什么我有CSS部分注释掉，但放置按钮下单独申报单，而不是将它们放在同一个根本的伎俩。 – WhatAmIDoing