拼命尝试制作一个按钮版本的导航栏，以限制我们学校网站对 SiteCore 的访问。我有最少的可用页面组件，但找到了一种使用 html 在富文本选项中创建我想要的内容的方法。
但是，当我创建多个悬停链接时，一切都变得很奇怪！ 请尝试通过 https://bfotool.com/html-tester 看看我的意思 - 所有下拉菜单都会立即展开。我该如何解决这个问题？！
当前设置是：
一个工作按钮水平栏，允许站点查看者单击他们想要链接的站点。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button {
background-color: #003057;
color: white;
border: 2px solid #003057;
font-family: "Montserrat Light";
text-decoration: none;
}
.button:hover {
background-color: #30CDD7;
color: black;
border: 2px solid #30CDD7;
font-family: "Montserrat Light";
text-decoration: none;
}
.dropbtn {
border: none;
background-color: #003057;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: "Montserrat Light";
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #003057;
color: white;
border: none;
font-family: "Montserrat Light";
text-decoration: none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
background-color: #003057;
color: white;
padding: 12px 16px;
font-family: "Montserrat Light";
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #30CDD7;
color: black;}
.dropdown:hover .dropdown-content {
background-color: #30CDD7;
color: black;
border: none;
font-family: "Montserrat Light";
text-decoration: none;
display: block;}
.dropdown:hover .dropbtn {
background-color: #30CDD7;
color: black;
border: none;
font-family: "Montserrat Light";
text-decoration: none;
display: block;
}
</style>
</head>
<body style="background-color:white;">
<a href="https://www.dcislibraries.com/" class="button">DCIS Libraries Home</a>
<div class="dropdown">
<button class="dropbtn">Destiny Discover ▼</button>
<div class="dropdown-content">
<a href="#">Lower Primary Library</a>
<a href="#">Main Library</a>
<a href="#">Follett Destiny</a>
</div>
<div class="dropdown">
<button class="dropbtn">Further Resources ▼</button>
<div class="dropdown-content">
<a href="#">Guidelines</a>
<a href="#">Subscriptions</a>
<a href="#">Book Requests</a>
</div>
<a href="https://www.reddotawards.com/" class="button">Red Dot Books</a>
<div class="dropdown">
<button class="dropbtn">E-Mails ▼</button>
<div class="dropdown-content">
<a href="mailto:[email protected]?subject=ATTN:%20Lower%20Primary%20Library">Lower Primary Library</a>
<a href="mailto:[email protected]?subject=ATTN:%20Main%20Library%20Primary">Main Library (Primary)</a>
<a href="mailto:[email protected]?subject=ATTN:%20Main%20Library%20Secondary">Main Library Secondary</a>
</div>
</div>
</body>
</html>
我很确定那是因为你忘记了一些结束 div 标签（前两个带有“dropdown”类的 div 没有结束 div 标签）