Текстовое украшение, не работающее при наведении курсора, а все остальное

Question

Я делаю содержимое меню с переключением при наведении курсора на разные предметы. Я создал CSS, который отображает еще один div относительно того, на котором навис. Я сделал свои пункты меню меняющимися цветами фона при наведении курсора мыши, но я не могу заставить их менять текстовое оформление. Что мне здесь не хватает?

У меня есть эта скрипку:

https://jsfiddle.net/nczoptvt/

<div id="mainContainer"> 
     <div id="topLogo" class="topLogo"><h1>Logo</h1></div> 
     <div id="containerMenu" class="menuContent"> 
      <div id="menuItemA" class="menuItem">Menu 1</div> 
      <div id="menuContent1" class="contentItem">First text</div> 
      <div id="menuItemB" class="menuItem">Menu 2</div> 
      <div id="menuContent2" class="contentItem">Second text</div> 
      <div id="menuItemC" class="menuItem">Menu 3</div> 
      <div id="menuContent3" class="contentItem">Third text</div> 
      <div id="menuItemD" class="menuItem">Menu 4</div> 
      <div id="menuContent4" class="contentItem">Fourth text</div> 
     </div> 
    </div> 

CSS:

.topLogo 
{ 
    height: 200px; 
} 

.menuContent 
{ 
    width: 90%; 
    margin:auto; 
    min-width: 600px; 
    white-space:nowrap; 
} 

.menuItem 
{ 
    display:inline-block; 
    padding:20px; 
    width: 20%; 
    text-align:center; 
    cursor: pointer; 
    min-width: 150px; 
} 

    .menuItem:hover 
    { 
     font: bold; 
     text-decoration: navy solid underline; 
     background-color: lightblue; 
    } 

.contentItem 
{ 
    display:none; 
} 

.menuItem:hover + .contentItem 
{ 
    display:block; 
    position:absolute; 
} 

Answer 1

Просто изменить text-decoration: от text-decoration: navy solid underline; к только text-decoration:underline, как это:

.menuItem:hover{font:bold;text-decoration:underline;background-color:lightblue;} 

revised jsFiddle

Вот только допустимые параметры для text-decoration:

https://css-tricks.com/almanac/properties/t/text-decoration/

Answer 2

text-decoration только принимает тип отделки, а не цвет или узор. Используйте text-decoration-color, чтобы указать цвет подчеркивания. Ваш CSS должен быть:

text-decoration: underline; 
text-decoration-color: navy; 

Для Firefox вам может понадобиться добавить moz-text-decoration-color: navy;

Answer 3

Попробуйте это:

.menuItem:hover 
{ 
    font: bold; 
    text-decoration: underline; 
    background-color: lightblue; 
} 

Answer 4

Ваш MenuItem: класс парения имеет текст-украшение, которое работает. Твердая подчеркивающая часть флота делает ваш подчеркивающий темно-синий цвет. Если вы хотите изменить цвет текста, вы должны использовать

color:red; 

или любой другой цвет вы хотите, в вашем MenuItem: парения класс