0
我想創建一個菜單，我將鼠標懸停在一個按鈕上，一串子鏈接將出現在下面。但是，當我嘗試在一行中執行多個按鈕時，假設我將鼠標懸停在第二個按鈕上，它的鏈接仍然出現在第一個按鈕下方。如何解決鏈接在下拉菜單中的位置
下面的代碼：
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/
同樣，麻煩的部分是下面的按鈕，丟失的圖片菜單部分工作正常。我能擺脫這種混亂的最佳狀態是，第一個按鈕鏈接正常顯示，第二個按鈕鏈接跨越按鈕區域時跨過。
謝謝，我只是使用jQuery的做法，這就是爲什麼我有CSS部分註釋掉，但放置按鈕下單獨申報單，而不是將它們放在同一個根本的伎倆。 – WhatAmIDoing