html - CSSヘルプ| メニュー

Question

サイト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/

Answer 1

リンクにカーソルを合わせると、画像が表示されます。この画像はbackground-imageを使用して設定します。同時に、リンクの行の高さを画像の高さに変更します。これにより、リンクが「押し込まれ」、下のリンクと重なります。

これがあなたの問題です。画像を正しく表示するには、リンク要素の高さを画像の横に設定する必要があります。ただし、line-height（またはheight）を適用すると、リンクがその兄弟とオーバーラップするか、他のリンクを脇に押しやることになります。

必要な効果を得る最良の方法は、JQueryなどのJavascriptプラグインを使用してカスタムツールチップ（画像）を実行し、に背景色のみを適用すること:hoverです。

Answer 2

メニュー項目ごとにdivを作成していますが、これは良い習慣ではありません。簡単なメニューを作成する方法は次のとおりです。