下拉菜單無法從CSS或Javascript運行？

Question

我試圖弄清楚為什么我的下拉菜單不起作用。

這是我正在處理的頁面： http : //www.privateservercloud.com/

如果將鼠標懸停在“管理廣告系列”左側的區域，您應該會看到“ SEO信息中心”出現並帶有下拉菜單。

當我添加無法確定的下拉菜單時，發生了3件事。

1. 當“ li應該位於最左側時，“ SEO Dashboard”鏈接被推到右側。

2. 除非將鼠標懸停在其上方，否則“ SEO儀表板”文本將完全消失。

3. 下拉菜單中有黑色正方形，這些正方形不會出現在我正在使用的其他網站上...

當我添加下拉菜單時，誰能看到導致這些事情發生的原因？

編輯：除＃1外，其他所有內容似乎都已修復。 “ SEO信息中心”鏈接應位於最左側，但似乎仍無法正常工作...

Answer 1

首先，如果您發布相關的html和CSS，對於以后查看此問題的人將有更大的幫助。 既然您沒有這樣做，我將在這里進行：

<ul class="nav" style="width: 158px; left: 156px; visibility: hidden;">
  <li><a href="https://mywebsite.com" class="subfoldericon">SEO Dashboard</a>
    <ul style="margin-left: 1px; width: 185px; left: 156px; visibility: hidden;">
        <li style="width:185px"><a href="test.php"><span style="width:241px">Test Menu</span></a></li>
        <li style="width:185px"><a href="test.php"><span style="width:241px">Test Menu</span></a></li>
        <li style="width:185px"><a href="test.php"><span style="width:241px">Test Menu</span></a></li>
        <li style="width:185px"><a href="test.php"><span style="width:241px">Test Menu</span></a></li>
    </ul>
  </li>
</ul>    

問題是您正在對左側位置進行硬編碼。 如果將其刪除，列表項將正確浮動。

Answer 2

1. 要隨時顯示“ SEO信息中心”，只需添加“ visibility：visible;”。 到選擇器“ .navbar .nav> li> a”上的style.css第66行。 這是因為ul.nav隱藏了可見性，而li獲得此屬性是因為ul是它的父級。

2. 添加“ text-align：left;” 到樣式行148，以使下拉菜單的文本向左對齊。

3. 添加“列表樣式類型：無；” 到您的style.css第139行，以使用選擇器“ .menu ul li ul li”刪除黑色方塊。

Answer 3

我將在下面解決每個問題：

1.“ SEO Dashboard”鏈接被推到右邊，而那個li應該在最左邊。

您所有.navbar .nav元素的內聯樣式均為left:156px; 。 刪除它，您的鏈接將正確顯示

2.除非您將鼠標懸停在“ SEO儀表盤”上，否則該文本將完全消失。

您的第一個.navbar .nav元素具有嵌入式的visibility:hidden;樣式visibility:hidden; 。 刪除它，您的鏈接將正確顯示。

3.下拉菜單中有黑色方塊，在我正在使用的其他網站上沒有出現...

如果將list-style:none:添加到.menu ul li ul li元素，這應該可以解決您的問題。