Question

I have this menu that I have been working on for a while. I am using the CSS table displays to accomplish it. When the text inside of my links take up two lines, the ones that are only one line will not fill the parent li on hover. Is there any way I am missing that can accomplish this?

http://jsfiddle.net/g7jmh567/

css

.menu {
  background-color: #687c9e;
  display: table;
}

 .menu-list {
   display: table-row;
 }

.menu-list > li {
  display: table-cell;
  height: 100%;
  overflow: hidden;
  line-height: 1.125rem;
  overflow: auto;
}

.menu-list > li > a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 1.25rem 1.25rem 1.25rem 0;
  box-sizing: border-box;
  height: 100%;
  min-height: 2.25rem;
}

.menu-list > li > a:hover {
  background-color: #7889a8;
}

.dropdown-list {
  display: none;
}

.hidden {
  display: none;
}

html

 <nav class="content menu">
  <ul class="menu-list">
    <li><a href="">Home</a></li>
    <li><a href="">A really long</a></li>
    <li><a href="">Some really long word</a></li>
    <li><a href="">Special Events</a></li>
    <li><a href="">Newsletter</a></li>
    <li><a href="">Photo Gallery</a></li>
  </ul>
</nav>

Answer 1

the reason why it didn't fill the entire li 'coz you're just filling the anchor

hover the li instead of the anchor

.menu-list > li:hover {
  background-color: #7889a8;
}

JSFIDDLE DEMO

Answer 2

Simply remove the padding from your li, and add it to your menu-list, check out the link below;

Nav

Answer 3

请参阅此链接：这可能会对您有所帮助：https://jsfiddle.net/guruWork/8fwo0r06/2/

<nav class="content menu">
      <ul class="menu-list">
          <li><a href=""><span>Home</span></a></li>
        <li><a href=""><span>A really long</span></a></li>
        <li><a href=""><span>Some really long word</span></a></li>
        <li><a href=""><span>Special Events</span></a></li>
        <li><a href=""><span>Newsletter</span></a></li>
        <li><a href=""><span>Photo Gallery</span></a></li>
      </ul>
    </nav>

和CSS

.menu {
  background-color: #687c9e;
}

.menu-list {
  display: table;padding:0; margin:0;width:100%;
}

.menu-list > li {
  display: table-cell;
  height: 100%;
  overflow: hidden; vertical-align: top;
  overflow: auto;
}

.menu-list > li > a {
  display: table;
  color: #fff;
  text-decoration: none;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  min-height:53px; text-align:center;
}
.menu-list > li > a span{display: table-cell;padding: 5% .5rem;vertical-align: middle;}
.menu-list > li > a:hover {
  background-color: #7889a8;
}

.dropdown-list {
  display: none;
}

.hidden {
  display: none;
}

css anchor fill entire list element

3 个答案: