css anchor заполнить весь элемент списка

У меня есть это меню, над которым я работал некоторое время. Я использую отображение таблиц CSS для его выполнения. Когда текст внутри моих ссылок занимает две строки, те, которые являются только одной строкой, не будут заполнять родительский li при наведении. Есть ли какой-то способ, которым я не могу, что может это сделать?css anchor заполнить весь элемент списка

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>

источник

2015-08-07 user3705143

Я не очень понимаю, не могли бы вы подробнее рассказать? какую функциональность вы ищете? как вы хотите, чтобы эта навигация появилась? –

Я пытаюсь получить ссылки на hover, чтобы заполнить родительский ли, а затем всю высоту меню, независимо от того, сколько строк текста есть в привязке. Возможно, вам придется изменить размер скрипта, чтобы получить более длинные элементы в два ряда. – user3705143

Хм, извините, но я не понимаю вашу точку зрения! любая визуализация? –

причина, почему он не заполнили весь LI «сог вы просто наполняя anchor

зависать li вместо anchor

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

JSFIDDLE DEMO

источник

2015-08-07 02:35:06

Да, это был один из способов сделать это. Я пытался получить его на якорь, хотя, поскольку я собирался сделать трюк checkbox на якоре и должен был нацелиться на него, поскольку нет способа настроить таргетинг на родительский флажок. Я пытался сделать резервную копию noscript. Спасибо хоть! – user3705143

Просто удалите отступы от вашего li, и добавить его в свой menu-list проверить ссылку ниже;

Nav

источник

2015-08-07 02:37:51

смотрите по этой ссылке: это может помочь вам: 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; 
}

источник

2015-08-07 06:11:10 Guru

css anchor заполнить весь элемент списка

ответ

Смежные вопросы