CSS帮助|菜单

时间：2012-07-24 15:30:25

标签： html css

请查看该网站 http://dreamsnw.com/faiq123/

问题是抽搐和菜单相互碰撞，并且它在整个屏幕上广泛传播，我只想挤到中心。相互碰撞。我将父母的位置设置为绝对和孩子亲戚。没什么工作。

#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/

2 个答案:

答案 0 :(得分：0)

将鼠标悬停在链接上时，会显示图像。您可以使用background-image设置此图像。同时，将链接的行高更改为图像的高度。这会导致链接被“推”下来，与下面的链接重叠。

这就是你的问题所在。为了正确显示图像，您需要将链接元素的高度设置为图像的一侧。但是，通过应用line-height（或height），您将导致链接与其兄弟姐妹重叠，或以其他方式将其他链接推到一边。

获得所需效果的最佳方法是使用JQuery之类的Javascript插件来执行自定义工具提示（图像），并仅在:hover上应用背景颜色。

答案 1 :(得分：0)

您正在为每个菜单项创建一个div，这不是一个好习惯，here's如何创建一个简单的菜单。

相关问题
最新问题