CSS幫助|菜單

Question

請在現場看 http://dreamsnw.com/faiq123/

問題是顛簸和菜單中相互碰撞，也被廣泛圍繞整個屏幕傳播，我只是想往下擠center.Navs每個都collidng 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如何創建一個簡單的菜單。