이게 수평 메뉴 기술입니까?

Question

내 CSS는 다음과 같습니다

#menu { 
    background-color: #a40a0a; 
    width: 830px; 
    height: 36px; 
    position: relative; 
    top: 39px; 
    left: 172px; 
} 
#menu >ul { 
    list-style-type: none; 
} 
#menu ul li { 
    font-family: Arial, Helvatica, Verdana; 
} 
#menu ul li >a { 
    display: block; 
    float: left; 
    text-decoration: none; 
    color: #ffffff; 
    line-height: 36px; 
    width: 166px; 
    text-align: center; 
} 
#menu ul li >a:hover { 
    background-color: #d74343; 
    border-bottom: 2px solid #bc1515; 
    line-height: 34px; 
} 
#menu ul li >a:active { 
    background-color: #a40a0a; 
} 

이 메뉴를 잘 IE7과는 belows을 보이지 않는다. 이것이 틀린 경우에, 저에게 권리를 말해주십시오, 감사합니다.

http://jsfiddle.net/a4Qe3/ 여기 링크

대신 a의 li에 float을 둘 필요가

Answer 1

입니다. 리가 매번 차단 될 것이기에 이것은 바쁩니다.

CSS

#menu { 
    background-color: #a40a0a; 
    width: 830px; 
    height: 36px; 
    position: relative; 
    top: 39px; 
    left: 172px; 
} 
#menu > ul { 
    list-style-type: none; 
} 
#menu ul li { 
    font-family: Arial, Helvatica, Verdana; 
    float: left; 
} 
#menu ul li > a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    line-height: 36px; 
    width: 166px; 
    text-align: center; 
} 
#menu ul li > a:hover { 
    background-color: #d74343; 
    border-bottom: 2px solid #bc1515; 
    line-height: 34px; 
} 
#menu ul li > a:active { 
    background-color: #a40a0a; 
} 

Demo

편집 한

우리는 일에 float을 넣어 : 여기

는 업데이트 된 코드입니다 e li 대신 이 있고 이 각각 li으로 묶여 있기 때문에 각각 display: block;이 적용됩니다. DOM 구조를 생각하면 a 태그를 떠 다니는 경우 서로 옆에 떠 다니는 항목인데 동일한 범위에 있지 않습니다. 그들은 DOM 형제가 아닙니다. 그들의 부모님은. 부모님을두고 다니는 것뿐입니다. 이제 IE7에서 블로킹 요소 뒤에 떠 다니면 플로팅 항목이 푸시 다운됩니다. 그래서 우리가해야 할 일은 li 항목을 띄우는 것입니다.

Here is a demo 여기서 a 태그는 플로팅되어 있으며, 무슨 일이 일어나고 있는지 보여주기 위해 li 태그 주위에 테두리를 넣었습니다. IE7에서 확인하십시오.