W3中的第一个菜单项默认为深灰色。CSS
如图所示，第一个菜单项默认为深灰色，尽管我没有在任何地方指定。我想这意味着即使没有鼠标，它也会处于活动状态。
所需行为：除非鼠标悬停，否则整个菜单栏为浅灰色
W3学校表示：
带下拉框的导航栏注意：当下拉框“打开”时，下拉链接会获得灰色背景颜色，以指示其处于活动状态。要重写这个，添加一个w3悬停颜色类到"下拉"li和a：
这是我的html代码
<ul class="w3-navbar w3-light-grey w3-border">
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 0</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 1</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 2</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 3</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 4</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
</ul>任何帮助都将不胜感激
共有2个答案
导航栏和悬停有相同的颜色，所以我不明白你怎么能得到一个可见的悬停颜色变化。
<ul class="w3-navbar w3-light-grey w3-border">
<li class="w3-dropdown-hover w3-light-grey w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 0</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 1</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 2</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 3</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
<li class="w3-dropdown-hover w3-hover-light-grey"><a class="w3-hover-light-grey" href="http://www.google.com">Item Name 4</a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="www.i-koda.com">link name 0</a>
<a href="www.i-koda.com">link name 1</a>
<a href="www.i-koda.com">link name 2</a>
</div></li>
</ul>
更新的代码和小提琴http://jsfiddle.net/eyjqrh85/1/
W3。css文件设置为使用以下css，请注意。w3下拉悬停：第一个孩子。
.w3-sidenav .w3-dropdown-hover:hover,.w3-sidenav .w3-dropdown-hover:first-child,.w3-sidenav .w3-dropdown-click:hover{background-color:#ccc;color:#000}
由原海报添加：
只需将背景颜色更改为浅灰色（#f2f2f2）即可，但这似乎有点像黑客，因为这迫使网站上的所有导航栏共享颜色。然而，这可能是w3c的一个缺陷，因为老实说，我看不到其他解决方案。所以我接受这个
-
问题内容： 在我的应用程序中，我有选项菜单，我尝试自定义它，我通过将其引用为样式来实现， 我需要的是删除选项菜单周围的默认灰色边框或将其自定义为另一种颜色。 任何建议将被认真考虑 。 我的代码： 问题答案： 您是否尝试过看这个问题？如何更改选项菜单的背景颜色 ？您应该可以使用那里的大多数答案来帮助您！
-
当使用 VSCode Jupyter Notebook 使用 绘制图形时，即使 VSCode 主题为深色，图形也会以浅色主题呈现。据我了解，这个问题已经解决了，当 VSCode 主题默认为深色时，VSCode 应该默认 数字。 我做错了什么？ 我对整个数据科学和机器学习领域还很陌生，到目前为止，我一直在使用Jupyter笔记本（有时还有Jupyter实验室）来满足我的所有编码需求。然而，Jupyt
-
问题内容： 我有两个下拉菜单，其中的选项不是从数据库中获取的。 第一个，让用户选择一个类别。 第二个选项取决于第一个下拉菜单中的选择。例如，如果用户选择“ 第一个” 选项，则第二个下拉列表将显示 但是当用户改变主意，或先选择 第二个 选项时，第二个下拉列表现在将显示 我的问题是我该如何实现？不用数据库就可以做到吗？ 谢谢！ 问题答案： 参见下文，查看 不使用数据库 的 工作示例 。 使用MySQL
-
本文向大家介绍在默认的Bootstrap导航栏中为活动链接添加灰色背景色，包括了在默认的Bootstrap导航栏中为活动链接添加灰色背景色的使用技巧和注意事项，需要的朋友参考一下 要将灰色背景色添加到活动链接，请使用Bootstrap中的.active类。 您可以尝试运行以下代码来实现.active类- 示例
-
我有一个可编辑的datatable，包含列“Datatype”。编辑此列时，使用SelectOne菜单选择值“字符串”、“数字”或“日期”。当我进入编辑模式时，“Datatype”列被设置为“String”（数据类型列表的第一项），但我希望它是该列的当前值（就像在Primefaces showcase中：单击——例如，如果我单击第二个表的第一行和第三列，则应选择“Fiat”，而不是selectOn
-
欢迎 在这个表中，我让列中提到的单元格可编辑，让用户随心所欲地制作所需的值...但是他们告诉我，这个列的值可以只取其中一个值：25,50,75,100，所以，他们问我制作一个选项菜单（就像图片中提到的那样），允许他们直接选择所需的值并快速工作。那么，我该如何解决它呢？（注意：我正在使用java秋千）