html - :hover not going full width on dropdown menu

Question

我的问题是，我正在通过设计 _ 的主题来制作我的第一个 wordpress 主题。我一直在努力添加下拉菜单，我遇到的问题是，如果其中一个下拉项标题太宽，则 a:hover 颜色将不会覆盖所包含项的整个宽度。

请参阅“非常长的标题宽度”中的内容。

抱歉，如果我的代码有点乱，仍然很新!

HTML

    <nav id="site-navigation" class="main-navigation" role="navigation">
            <div class="menu-guides-container"><ul id="primary-menu" class="menu"><li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-114"><a href="http://localhost/wordpress/index.php/achievement-guides/">More Guides</a>
<ul class="sub-menu">
    <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://localhost/wordpress/index.php/guides-11/">Guides 11</a></li>
    <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://localhost/wordpress/index.php/guides-10/">Guides 10</a></li>
    <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://localhost/wordpress/index.php/guides-8/">Guides 9</a></li>
    <li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://localhost/wordpress/index.php/guides-7/">Guides 7</a></li>
</ul>
</li>
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-115"><a href="http://localhost/wordpress/index.php/map-completion-guides/">Another Dropdown Menu</a>
<ul class="sub-menu">
    <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://localhost/wordpress/index.php/guides-15/">Guides 15</a></li>
    <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://localhost/wordpress/index.php/guides-14/">Guides 14</a></li>
    <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://localhost/wordpress/index.php/guides-13/">Guides 13</a></li>
    <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://localhost/wordpress/index.php/guides-12/">Guides 12</a></li>
</ul>
</li>
<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-64 current_page_item menu-item-has-children menu-item-109"><a href="http://localhost/wordpress/index.php/guides-6/">Guides 6</a>
<ul class="sub-menu">
    <li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110"><a href="http://localhost/wordpress/index.php/guides-5/">Guides 5</a></li>
    <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://localhost/wordpress/index.php/guides-4/">Guides 4</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://localhost/wordpress/index.php/guides-3/">Guides 3</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://localhost/wordpress/index.php/guides-2/">Guides 2</a></li>
</ul>
</li>
<li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-122"><a href="http://localhost/wordpress/index.php/guides-16/">A Really Long Header Width</a>
<ul class="sub-menu">
    <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="http://localhost/wordpress/index.php/guides-16-2/">Guides 16</a></li>
    <li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="http://localhost/wordpress/index.php/guides-16/">A Really Long Header Width</a></li>
</ul>
</li>
</ul></div></nav>

http://jsfiddle.net/8v5Lpdxg/

Answer 1

问题出在 css 第 44 行:

 .main-navigation ul ul a {
    width: 200px;
}

这会强制任何 anchor 标记具有固定宽度，移除允许它们继承宽度 100%

删除它，菜单项将是全宽的。

这会破坏较小的菜单项，因此您还需要将以下内容添加到第 50 行:

.main-navigation ul ul li {
  width: 100%;
}

这告诉子菜单列表项始终为 100%(不仅仅是内容多宽)

See here for fixed jsfiddle