Question

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

查看“A Really Long Header Width”中的内容。

很抱歉，如果我的代码有点乱，还是很新的！

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;
}

这会强制任何锚标记具有固定的宽度，删除它允许它们继承宽度100％

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

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

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

这告诉子菜单列表项始终为100％（不仅仅是内容的宽度）

See here for fixed jsfiddle

a：在下拉菜单中悬停不会全宽

1 个答案: