수직으로 정렬 고정 높이 멀티 라인 목록 항목 (텍스트뿐만 아니라) 내가 메뉴를 가지고 다음과 같은 동작이 필요

Question

:

이 (뿐만 아니라 텍스트) 목록 항목을 가리키면 배경이 색이 바뀌고 텍스트가 흰색으로 바뀌어야합니다. (단선에서만 작동). Sitewide, 모든 스팬 색상 세트가 있고 변경할 수 없습니다 (CSS 상단에 포함되어 있음). 그래서이 메뉴 만 덮어 써야합니다.

비슷한 질문을 발견했지만이를 구체적으로 다루지는 못했습니다.

HTML

<ul id="navbar"> 
    <li><a href="#">Line 1</a></li> 
    <li><a href="#"><span>Line 2 <br>Line 2 - 2nd Row</span></a></li> 
    <li><a href="#"><span>Line 3<br>Line 2 - 2nd Row</span></a></li> 
    <li><a href="#">Line 4</a></li> 
</ul> 

CSS

span { 
    color: #feb800; 
} 

#navbar { 
    height: 105px; 
    line-height: 105px; 
    vertical-align: middle; 
} 

ul#navbar { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    text-align: center; 
    width: 100%; 
    white-space: nowrap; 
    padding-left: 0; 
    font-size: 0; // remove whitespace to prevent extra space before list item 
} 

#navbar li { 
    float: none; 
    display: inline-block; 
    width: 25%; 
    text-transform: uppercase; 
    vertical-align: middle; 
} 

#navbar li { 
    border-right: 2px solid #feb800; 
} 

#navbar li:last-child { 
    border-right: none; 
} 

#navbar a { 
    display: block; 
    color: #feb800; 
    font-weight: bold; 
    font-size: 16px; 
    text-decoration: none; 
} 

#navbar a { 
    height: 105px; 
} 

#navbar a:hover { 
    background-color: #feb800; 
    color: #ffffff; 
} 

#navbar a span { 
    line-height: normal; 
    vertical-align: middle; 
    display: inline-block; 
} 

#navbar a span:hover { 
    color: #ffffff; 
} 

Answer 1

이동 :hover 요소 li합니다. 대신 전체 #navbar a:hover 선택 넣어 위의 경우 :이 페이지의 모든 경간에 영향을 미칠 것으로 span에 대한

#navbar li:hover { 
    background-color: #feb800; 
    color: #ffffff; 
} 
#navbar li:hover a { 
    color: #ffffff; 
} 

그리고 배경은, 그 일반해서는 안됩니다.