Extend menu links to the width of parent

Question

Something I thought should be a simple task is causing me quite a headache. I want my dropdown submenu <a> links to be the same width as their <li> parents, and I simply can't figure out how it's done.

Here's the code:

HTML:

<div id="navbar" class="navbar">
  <nav id="site-navigation" class="navigation main-navigation" role="navigation">
    <div class="menu-hovedmenu-container">
      <ul id="primary-menu" class="nav-menu">
        <li id="menu-item-169" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-169"><a href="http://renservice.dk/">Forside</a></li>
        <li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-170"><a href="http://renservice.dk/profil/">Profil</a></li>
        <li id="menu-item-171" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-171"><a href="http://renservice.dk/rengoering/">Rengøring</a>
          <ul class="sub-menu">
            <li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"><a href="http://renservice.dk/rengoering/erhvervsrengoering/">Erhvervsrengøring</a></li>
            <li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-173"><a href="http://renservice.dk/rengoering/privat-rengoering/">Privat rengøring</a></li>
            <li id="menu-item-174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-174"><a href="http://renservice.dk/rengoering/haandvaerker-rengoering/">Håndværkerrengøring</a></li>
            <li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-175"><a href="http://renservice.dk/rengoering/maskinrengoering/">Maskinrengøring</a></li>
            <li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-176"><a href="http://renservice.dk/rengoering/specialrengoering/">Specialrengøring</a></li>
            <li id="menu-item-177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-177"><a href="http://renservice.dk/rengoering/lagerrengoering/">Lagerrengøring</a></li>
            <li id="menu-item-178" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-178"><a href="http://renservice.dk/rengoering/vinduespolering/">Vinduespolering</a></li>
            <li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-179"><a href="http://renservice.dk/rengoering/computer-rens/">Computerrens</a></li>
          </ul>
        </li>
        <li id="menu-item-180" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-25 current_page_item menu-item-180"><a href="http://renservice.dk/ejendomsservice/">Ejendomsservice</a></li>
        <li id="menu-item-181" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-181"><a href="http://renservice.dk/taepperens/">Tæpperens</a></li>
        <li id="menu-item-182" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-182"><a href="http://renservice.dk/rens-vask-rul/">Rens, vask &amp; rul</a></li>
        <li id="menu-item-727" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-727"><a href="http://renservice.dk/produkter/">Produkter</a>
          <ul class="sub-menu">
            <li id="menu-item-729" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-729"><a href="http://renservice.dk/produkt-kategori/universalrengoering/">Universalrengøring</a></li>
            <li id="menu-item-730" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-730"><a href="http://renservice.dk/produkt-kategori/sanitetsrengoering/">Sanitetsrengøring</a></li>
            <li id="menu-item-728" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-728"><a href="http://renservice.dk/produkt-kategori/koekkenrengoering/">Køkkenrengøring</a></li>
            <li id="menu-item-732" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-732"><a href="http://renservice.dk/produkt-kategori/maskinopvask/">Maskinopvask</a></li>
            <li id="menu-item-731" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-731"><a href="http://renservice.dk/produkt-kategori/gulvrengoering-og-pleje/">Gulvrengøring og -pleje</a></li>
            <li id="menu-item-737" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-737"><a href="http://renservice.dk/produkt-kategori/stenrens-og-pleje/">Stenrens og -pleje</a>
              <ul class="sub-menu">
                <li id="menu-item-734" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-734"><a href="http://renservice.dk/produkt-kategori/stenrens-og-pleje/plejemiddel/">Plejemiddel</a></li>
                <li id="menu-item-735" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-735"><a href="http://renservice.dk/produkt-kategori/stenrens-og-pleje/impraegnering-og-forsejling/">Imprægnering og forsejling</a></li>
                <li id="menu-item-736" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-736"><a href="http://renservice.dk/produkt-kategori/stenrens-og-pleje/specialrens/">Specialrens</a></li>
              </ul>
            </li>
            <li id="menu-item-733" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-733"><a href="http://renservice.dk/produkt-kategori/diverse/">Diverse</a></li>
          </ul>
        </li>
        <li id="menu-item-311" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-311"><a href="http://renservice.dk/leverandoerer/">Leverandører</a></li>
        <li id="menu-item-190" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-190"><a href="http://renservice.dk/kontakt/">Kontakt</a>
          <ul class="sub-menu">
            <li id="menu-item-191" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-191"><a href="http://renservice.dk/kontakt/job/">Job</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
  <!-- #site-navigation -->
</div>

CSS:

.main-navigation {
  clear: both;
  margin: 0 auto;
  max-width: 1300px;
  min-height: 35px;
  position: relative;
}

ul.nav-menu,
div.nav-menu > ul {
  margin: 0;
  padding: 0 40px 0 0;
}

.nav-menu li {
  display: inline-block;
  position: relative;
}

.nav-menu li a {
  color: #ffffff;
  font-family: "arial black", arial, helvetica, sans-serif;
  font-weight: bolder;
  display: block;
  font-size: 15px;
  line-height: 1;
  padding: 10px 20px;
  text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
  color: #0e4377;
  background: #6a9ac9;
  background: -webkit-gradient(linear, left top, left bottom, from(#6a9ac9), to(#ffffff));
  background: -moz-linear-gradient(top, #6a9ac9, #ffffff);
  background: linear-gradient(to bottom, #6a9ac9, #ffffff);
}

.nav-menu .sub-menu,
.nav-menu .children {
  background-color: #0e4377;
  border: 1px solid #0e4377;
  border-top: 0;
  padding: 0;
  position: absolute;
  left: -1px;
  z-index: 99999;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.nav-menu ul .children li a:hover {
  background: #ffffff;
  color: #0e4377;
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
  border-left: 0;
  left: 100%;
  top: 0;
}

ul.nav-menu ul a,
.nav-menu ul ul a {
  color: #fff;
  margin: 0;
  min-width: 106px;
  white-space: nowrap;
}

ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover,
ul.nav-menu ul a:focus,
.nav-menu ul ul a:focus {
  background-color: #db572f;
}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul,
ul.nav-menu .focus > ul,
.nav-menu .focus > ul {
  clip: inherit;
  overflow: inherit;
  height: inherit;
  width: inherit;
}

.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
  color: #0e4377;
  background: #6a9ac9;
  background: -webkit-gradient(linear, left top, left bottom, from(#6a9ac9), to(#ffffff));
  background: -moz-linear-gradient(top, #6a9ac9, #ffffff);
  background: linear-gradient(to bottom, #6a9ac9, #ffffff);
  text-shadow: none;
  font-style: italic;
}

.menu-toggle {
  display: none;
}


/* Navbar */

.navbar {
  background: #4073a6;
  background: -webkit-gradient(linear, left top, left bottom, from(#4073a6), to(#0f4478));
  background: -moz-linear-gradient(top, #4073a6, #0f4478);
  background: linear-gradient(to bottom, #4073a6, #0f4478);
  text-shadow: #08223c 1px 1px 1px;
  margin: 0 auto;
  width: 100%;
  min-height: 35px;
}

.site-header .search-form {
  position: absolute;
  right: 20px;
  top: 1px;
}

.site-header .search-field {
  background-color: transparent;
  background-image: url(images/search-icon.png);
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
  height: 37px;
  margin: 3px 0;
  padding: 0 0 0 34px;
  position: relative;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition: width 400ms ease, background 400ms ease;
  width: 1px;
}

.site-header .search-field:focus {
  background-color: #fff;
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
  width: 230px;
}

https://jsfiddle.net/eoryttfh/

Answer 1

This happens because the <a> tag inside the submenu list is displayed as an inline-block. Inline block items behaves as block items, but does not grow to the size of their containers. In addition, the sub-menu menu-item list elements (li) are also displayed as inline-blocks, meaning they, too, will not grow to the full width of the container list (ul)

I would add a

.nav-menu ul,
.sub-menu a {
    display: block;
}

to the style, which achieves what you want.

Answer 2

You need to set the display property to block instead of inline-block:

.sub-menu li {
    display: block !important;
}