CODEWITHSUNDEEP
csshtml-listsanchorcss-tables
user3705143
user3705143

Reputation: 31

css anchor fill entire list element

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>

Upvotes: 1

Views: 1663

Answers (3)

Guru
Guru

Reputation: 631

See This link: this may help you: 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>

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

Upvotes: 0

Dyrandz Famador
Dyrandz Famador

Reputation: 4525

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

Upvotes: 0

Pouya Ataei
Pouya Ataei

Reputation: 2169

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

Nav

Upvotes: 1

Related Questions