首頁猿問下拉菜單/子菜單出現問題，懸停不起作用？

下拉菜單/子菜單出現問題，懸停不起作用？

JavaScript

人到中年有點甜 2023-10-20 16:26:34

我的下拉菜單有問題：它不起作用。然而，我的菜單是。這些鏈接也無法正常工作，它們將我帶到該頁面，但不是該部分。如果我取出display: none下拉菜單 CSS，它會顯示我的菜單，但不會顯示為下拉菜單。我猜菜單已正確編碼，但不知何故無法正確顯示。<nav> <ul class="menu"> <li class="..."> <a href="...">...</a> </li> <li class="item"><a href="...">..</a></li> <div class="...."> <ul> <li><a href="...">...</a></li> <li><a href="....">..</a></li> <li><a href="..">...</a></li> <li><a href="...">...</a></li> </ul> </div> <li class="item"><a href="...">...</a></li> <li class="item"><a href="...">...</a></li> <li class="item"><a href="..">..</a></li> </ul></nav>

查看完整描述

2 回答

POPMUISE

TA貢獻1765條經驗獲得超5個贊

在內部添加 div 從語義上來說是不正確的ul。在子菜單所屬的父li內添加子菜單。

nav {

width: 100%;

flex: 1;

}

nav ul {

display: flex;

flex-flow: row wrap;

list-style: none;

padding-top: 4%;

margin: 0;

}

nav ul li {

padding: 1em 4em;

}

nav ul li a {

text-decoration: none;

margin-right: auto;

color: #000;

font-size: 17px;

}

nav ul li a:hover {

border-bottom: 2px solid #724c20;

}

li.logo {

margin-right: auto;

}

.Submenu {

display: none;

}

nav ul li:hover .Submenu {

display: block;

background-color: #724c20;

position: absolute;

margin-top: 15px;

margin-left: -15px;

}

nav ul li:hover .Submenu ul {

display: block;

margin: 10px;

}

nav ul li:hover .Submenu ul li {

width: 150px;

padding: 10px;

border-bottom: 1px;

background: transparent;

border-radius: 0;

text-align: center;

}

nav ul li:hover .Submenu ul li:last-child {

border-bottom: none;

}

nav ul li:hover .Submenu ul li a:hover {

color: #d1b9a5;

}

<nav>

</li>

<ul>

</ul>

</div>

</li>

<ul>

</ul>

</div>

</li>

</ul>

</nav>

反對回復 2023-10-20

慕森王

TA貢獻1777條經驗獲得超3個贊

我使用 javascript 制作下拉菜單。選擇下拉菜單display: none;。要顯示下拉菜單，您必須執行某些操作，例如單擊圖標。所以你必須導入一個圖標或添加一個按鈕并使用javascript：

$("*here comes your icon's/div's/button's id/class name you want*").click(function(){

$(".Submenu").toggleClass("active");

});

</script>

比你必須在 CSS 中編寫 .Submenu 處于活動狀態時會發生什么情況：

.Submenu.active {

display: block;

}

這是我上一個項目的示例：

$(".menu-toggle-btn").click(function(){

$(this).toggleClass("fa-times");

$(".navigation-menu").toggleClass("active");

});

如果你想，當你點擊一個圖標并且下拉菜單中的圖標將更改為另一個圖標時，你必須將其寫入你的 javascript 腳本中： $(this).toggleClass("fa-times");。toggleClass("here comes your icons class name ");

如果您有任何其他問題，請隨時詢問。

反對回復 2023-10-20

2 回答
0 關注
196 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

下拉菜單/子菜單出現問題，懸停不起作用？

下拉菜單/子菜單出現問題，懸停不起作用？

2 回答

添加回答

下拉菜單/子菜單出現問題，懸停不起作用？

下拉菜單/子菜單出現問題，懸停不起作用？