CSS 도움말 | 메뉴

Question

이 http://dreamsnw.com/faiq123/

문제가 급히 당기는 메뉴가 서로 충돌하고 또한 널리 전체 화면 주위에 퍼져입니다 사이트 제발 봐, 난 그냥 각각 collidng하는 center.Navs 아래로 집어 넣은 싶어 other.i는 절대 위치 부모를 친척 상대자로 설정했습니다. 아무것도 작동하지 않습니다.

#menu-nav { 
    width: 20em; 
    padding: 0 0 0em 0; 
    height:5em; 
    margin-bottom: 5em; 
    position:relative; 


} 
#menu-nav ul { 
    list-style: none; 
    margin-right: 10px; 
    padding: 0px; 
    border: none; 
    line-height:13px; 
} 
#menu-nav li{ 
    margin: -5px; 
    list-style: none; 
} 
#menu-nav li a { 
    display: block; 
    padding: 7px 5px 3px 0.25em; 
    font-weight:bold; 
    text-decoration: none; 
    width: 100%; 
    line-height:13px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #ffffff; 
} 

html>body #menu-nav li a { 
    width: auto; 
} 

#menu-nav li a:hover { 

} 
#menu-nav #item1 a:hover 
{ 
background-image:url(images/navs/AboutUs.png); 
line-height:40px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 
#menu-nav #item2 a:hover 
{ 
background-image:url(images/navs/AboutUs.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 

#menu-nav #item3 a:hover 
{ 
background-image:url(images/navs/Services&product.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 

#menu-nav #item4 a:hover 
{ 
background-image:url(images/navs/Potfolio.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 
#menu-nav #item5 a:hover 
{ 
background-image:url(images/navs/Whyus.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 
#menu-nav #item6 a:hover 
{ 
background-image:url(images/navs/CSR.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 

#menu-nav #item7 a:hover 
{ 
background-image:url(images/navs/Contactus.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 

#menu-nav #item8 a:hover 
{ 
background-image:url(images/navs/Careers.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 


#menu-nav2 { 
    width: 20em; 
    padding: 0 0 0em 0; 
    height:5em; 
    margin-bottom: 5em; 
    position:relative; 
    } 
#menu-nav2 ul { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    border: none; 
} 
#menu-nav2 li{ 
    margin: -5px; 
    list-style: none; 
} 
#menu-nav2 li a { 
    display: block; 
    padding: 7px 5px 3px 0.25em; 
    font-weight:bold; 
    text-decoration: none; 
    width: 100%; 

    font-family:Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #ffffff; 
} 

html>body #menu-nav2 li a { 
    width: auto; 
} 

#menu-nav2 li a:hover { 

} 


#menu-nav2 #item9 a:hover 
{ 
background-image:url(images/navs/SAPDevlopment.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 
#menu-nav2 #item10 a:hover 
{ 
background-image:url(images/navs/SARemotebase.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 
#menu-nav2 #item11 a:hover 
{ 
background-image:url(images/navs/SARemotebase.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 
#menu-nav2 #item12 a:hover 
{ 
background-image:url(images/navs/Sapconstant.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 

#menu-nav2 #item13 a:hover 
{ 
background-image:url(images/navs/Sapconstant.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 

#menu-nav2 #item14 a:hover 
{ 
background-image:url(images/navs/SapABAP.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 
#menu-nav2 #item15 a:hover 
{ 
background-image:url(images/navs/Appleiostraining.png); 
line-height:35px; 
background-position:left; 
background-repeat:no-repeat; 
color: #ffffff; 
font-weight:bold; 
position:absolute; 
} 

.main-menu-div 
{ 
width: 100%; 
padding: 5px; 
margin-left:60px; 
} 
.main-menu-content 
{ 
margin-top:4px; 
} 
.main-menu-div-2 
{ 
float: left; 
width: 20%; 
height:170px; 
color:#FFFFFF; 

} 
.main-menu-div-3 
{ 
float: left; 
width: 16%; 
height:170px; 
border:#ffffff; 
color:#FFFFFF; 

} 
.main-menu-div-4 
{ 
float: left; 
width: 22%; 
height:170px; 
border:#ffffff; 
color:#FFFFFF; 
} 
.main-menu-div-5 
{ 
float: left; 
width: 22%; 
height:170px; 
color:#FFFFFF; 
} 

HTML 
<div class="main-menu-div"> 
<!-- main-menu-div starts --> 
    <div class="main-menu-div-2"> 
    <div class="main-menu-content"> 
    <div id="menu-nav"> 
    <ul> 
    <li id="item1"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">Home</div></a></div> 
    </li> 

    <li id="item2"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">About Us</div></a></div> 
    </li> 

    <li id="item3"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">Services &amp; Products</div></a></div> 
    </li> 


    <li id="item4"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">Portfolio</div></a></div> 
    </li> 
    </ul> 
    </div> 
    </div> 
    </div> 

    <div class="main-menu-div-3"> 
    <div class="main-menu-content"> 
    <div id="menu-nav"> 
    <ul> 
    <li id="item5"> 
    <div align="left"><a href="#"><div style="margin-left:70px; ">Why Us</div></a></div> 
    </li> 

    <li id="item6"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">CSR</div></a></div> 
    </li> 

    <li id="item7"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">Contact Us</div></a></div> 
    </li> 

    <li id="item8"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">Careers</div></a></div> 
    </li> 
    </ul> 
    </div> 
    </div> 
    </div> 


    <div class="main-menu-div-4"> 
    <div class="main-menu-content"> 
    <div id="menu-nav2"> 
    <ul class="menu-nav "> 
    <li id="item9"> 
    <div align="left"><a href="#"><div style="margin-left:70px; ">SAP Development</div></a></div> 
    </li> 

    <li id="item10"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">SAP Remote Basis</div></a></div> 
    </li> 

    <li id="item11"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">SAP Low Cost Support</div></a></div> 
    </li> 

    <li id="item12"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">Contract SAP Consultants</div></a></div> 
    </li> 
    </ul> 
    </div> 
    </div> 
    </div> 

    <div class="main-menu-div-5"> 
    <div class="main-menu-content"> 
    <div id="menu-nav2"> 
    <ul> 
    <li id="item13"> 
    <div align="left"><a href="#"><div style="margin-left:70px; ">Smartphone Development</div></a></div> 
    </li> 
    <li id="item14"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">SAP ABAP Training</div></a></div> 
    </li> 
    <li id="item15"> 
    <div align="left"><a href="#"><div style="margin-left:70px;">Apple iOS Training</div></a></div> 
    </li>  
    </ul> 
    </div> 
    </div> 
    </div> 

<br style="clear: left;" /> 
</div> 

Jsfiddle는 :http://jsfiddle.net/JeJTs/

Answer 1

당신이 링크 위로 마우스를 가져가 이미지를 표시합니다. 배경 이미지를 사용하여이 이미지를 설정합니다. 동시에 링크의 선 높이를 이미지의 높이로 변경합니다. 이렇게하면 링크가 아래로 겹쳐져 "아래로"밀려납니다.

여기가 귀하의 문제입니다. 이미지를 올바르게 표시하려면 링크 요소의 높이를 이미지의 측면으로 설정해야합니다. 그러나 line-height (또는 height)을 적용하면 해당 링크가 형제와 겹치게하거나 다른 링크를 옆으로 밀게됩니다.

원하는 효과를 얻으려면 JQuery와 같은 Javascript 플러그인을 사용하여 사용자 정의 툴팁 (이미지)을 수행하고 :hover에만 배경색을 적용하는 것이 가장 좋습니다.

Answer 2

각 메뉴 항목에 대해 div를 만들고 있습니다.이 방법은 간단한 예제입니다. here's 간단한 메뉴를 만드는 방법.