Question

我是一个完全的初学者，试图创建一个水平下拉菜单。我的样式表似乎不适用于我的子菜单级别。

请问您能在我的代码中发现错误吗？

感谢

在我的“_SiteLayout.cshtml”中我有

           <ul id="TopMenu">
                <li><a href="@Href("~/MgtCentre")">Management</a>
                    <ul id=“SubMenu”> 
                        <li><a href="@Href("~/AboutUs")">Admin Centre</a></li>
                        <li><a href="@Href("~/AboutUs")">Reports</a></li>
                    </ul>                        
                 </li>
                <li><a href="@Href("~/FAQ")">FAQ</a></li>
            </ul>

在我的“Site.css”中，我有

    ul#SubMenu {
        display: none;
    }

Answer 1

看起来你有魔术/卷曲引号： -

ul id=“SubMenu”

应为"SubMenu"或'SubMenu'

Answer 2

快速提示：我总是建议安装Firebug并检查那里的所有CSS相关问题。

在我看来，问题可能是：

CSS Precedence / Hierarchy
浏览器缓存问题。

无论如何，萤火虫很容易帮助您查明问题。

希望这有帮助！

Answer 3

在回答问题标题时，尝试使用“！important”作为最后的手段，如果没有别的办法可以解决你无法控制的CSS，例如在设置小部件或插件样式时。在我的特殊情况下，！重要的不起作用，这就是我到这里的方式。

如果！important不起作用，请尝试各种变体：

<style>

#SubMenu { display:none !important; }
ul#SubMenu { display:none !important; }
#SubMenu * { display:none !important; }
ul#SubMenu * { display:none !important; }

</style>

在我的特定情况下，我尝试了所有这些并最终得到了预期的结果：

div.gllr_single_image_text { display:none !important; }
.gllr_single_image_text { display:none !important; }
.gllr_single_image_text * { display:none !important; }
div.gllr_single_image_text * { display:none !important; }

奇怪的是，我不能孤立哪一个解决了我的问题，单独测试每一个。（WordPress或Firefox故障？）无论如何，“display：none！important”在您想清理像您无法控制的第三方窗口小部件时非常有用。

显示：无;不管用。

3 个答案: