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如何创建一个简单的菜单。