ドロップダウンメニュー - 親リンクがジャンプし、子リンクがセンターから外されます

Question

私はいくつか問題があるドロップダウンメニューを作成しました。

1）最初の親アイテムは、ホバーにジャンプします。

2）子アイテムは親アイテムと並んでいないし、ドロップダウンボックスの半分は白い背景ではなく透明です。

ご協力いただきましてありがとうございます。

#dropdownmenu { 
 
    background-color: #ffffff; 
 
    width: 100%; 
 
    color: #009999; 
 
    letter-spacing: 2px; 
 
    font-size: 14px; 
 
    margin: 0px; 
 
    padding: 10px 0 0 0; 
 
    position: relative; 
 
    height: 45px; 
 
    border-top: 1px solid #009999; 
 
    border-bottom: 1px solid #009999; 
 
} 
 
#dropdown { 
 
    display: inline-block; 
 
    text-align: center; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#dropdown ul { 
 
    overflow: hidden; 
 
    float: left; 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 1px solid #f3f2ee; 
 
} 
 
#dropdown li { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border-left: 0px solid #009999; 
 
    border-right: 0px solid #009999; 
 
    height: auto; 
 
} 
 
#dropdown li a, 
 
#dropdown li a:link, 
 
#dropdown li a:visited { 
 
    color: #009999; 
 
    display: inline-block; 
 
    font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 9px 5px 10px 0px; 
 
    text-decoration: none; 
 
} 
 
#dropdown li a:hover, 
 
#dropdown li a:active { 
 
    background: #ffffff; 
 
    color: #c6c1ae; 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: 9px 5px 10px 0px; 
 
} 
 
#dropdown li { 
 
    float: left; 
 
    padding: 0px 66px; 
 
} 
 
#dropdown li ul { 
 
    z-index: 9999; 
 
    position: absolute; 
 
    left: -999em; 
 
    height: auto; 
 
    width: 220px; 
 
    margin: 0; 
 
    padding: 0px; 
 
} 
 
#dropdown li ul a { 
 
    width: 220px; 
 
} 
 
#dropdown li ul ul { 
 
    margin: 0px 0 0 0px; 
 
} 
 
#dropdown li:hover ul ul, 
 
#dropdown li:hover ul ul ul, 
 
#dropdown li.sfhover ul ul, 
 
#dropdown li.sfhover ul ul ul { 
 
    left: -999em; 
 
} 
 
#dropdown li:hover ul, 
 
#dropdown li li:hover ul, 
 
#dropdown li li li:hover ul, 
 
#dropdown li.sfhover ul, 
 
#dropdown li li.sfhover ul, 
 
#dropdown li li li.sfhover ul { 
 
    left: auto; 
 
} 
 
#dropdown li:hover, 
 
#dropdown li.sfhover { 
 
    position: static; 
 
} 
 
#dropdown li li a, 
 
#dropdown li li a:link, 
 
#dropdown li li a:visited { 
 
    background: #ffffff; 
 
    width: 130px; 
 
    text-align: left; 
 
    color: #009999; 
 
    display: block; 
 
    font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif; 
 
    margin: 0; 
 
    padding: 9px 12px 10px 12px; 
 
    text-decoration: none; 
 
    z-index: 9999; 
 
    border-bottom: 0px solid #009999; 
 
} 
 
#dropdown li li a:hover, 
 
#dropdown li li a:active { 
 
    background: #ffffff; 
 
    color: #c6c1ae; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 9px 12px 10px 12px; 
 
    text-decoration: none; 
 
}

<div id="dropdownmenu"> 
 
    <ul id="dropdown"> 
 
    <a class="menuDrop"> 
 
     <li><a href="/">Item 1</a> 
 
     </li> 
 
     <li><a href="#"> 
 
    Item 2</a> 
 
     <ul> 
 
      <li><a href="#">page 1</a> 
 
      </li> 
 
      <li><a href="#">page 2</a> 
 
      </li> 
 
      <li><a href="#">page 3</a> 
 
      </li> 
 
      <li><a href="#">page 4</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 3</a> 
 
     </li> 
 
     <li><a href="#"> 
 
    Item 4</a> 
 
     <ul> 
 
      <li><a href="#">page 1</a> 
 
      </li> 
 
      <li><a href="#">page 2</a> 
 
      </li> 
 
      <li><a href="#">page 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 5</a> 
 
     </li> 
 
    </a> 
 
    </ul> 
 
</div>

Answer 1

はいこの

#dropdownmenu { 
 
    background-color: #ffffff; 
 
    width: 100%; 
 
    color: #009999; 
 
    letter-spacing: 2px; 
 
    font-size: 14px; 
 
    margin: 0px; 
 
    padding: 10px 0 0 0; 
 
    position: relative; 
 
    height: 45px; 
 
    border-top: 1px solid #009999; 
 
    border-bottom: 1px solid #009999; 
 
} 
 
#dropdown { 
 
    display: inline-block; 
 
    text-align: center; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
#dropdown ul { 
 
    overflow: hidden; 
 
    float: left; 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 1px solid #f3f2ee; 
 
} 
 
#dropdown li { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border-left: 0px solid #009999; 
 
    border-right: 0px solid #009999; 
 
    height: auto; 
 
} 
 
#dropdown li a, 
 
#dropdown li a:link, 
 
#dropdown li a:visited { 
 
    color: #009999; 
 
    display: inline-block; 
 
    font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 9px 5px 10px 0px; 
 
    text-decoration: none; 
 
} 
 
#dropdown li a:hover, 
 
#dropdown li a:active { 
 
    background: #ffffff; 
 
    color: #c6c1ae; 
 
    } 
 
#dropdown li { 
 
    float: left; 
 
    padding: 0px 66px; 
 
} 
 
#dropdown li ul { 
 
    z-index: 9999; 
 
    position: absolute; 
 
    left: -999em; 
 
    height: auto; 
 
    width: 220px; 
 
    margin: 0; 
 
    padding: 0px; 
 
} 
 
#dropdown li ul li { 
 
    padding: 0 0; 
 
} 
 
#dropdown li ul a, #dropdown li ul a:link { 
 
    width: 220px; 
 
    display:block; 
 
} 
 
#dropdown li ul ul { 
 
    margin: 0px 0 0 0px; 
 
} 
 
#dropdown li:hover ul ul, 
 
#dropdown li:hover ul ul ul, 
 
#dropdown li.sfhover ul ul, 
 
#dropdown li.sfhover ul ul ul { 
 
    left: -999em; 
 
} 
 
#dropdown li:hover ul, 
 
#dropdown li li:hover ul, 
 
#dropdown li li li:hover ul, 
 
#dropdown li.sfhover ul, 
 
#dropdown li li.sfhover ul, 
 
#dropdown li li li.sfhover ul { 
 
    left: auto; 
 
} 
 
#dropdown li:hover, 
 
#dropdown li.sfhover { 
 
    position: static; 
 
} 
 
#dropdown li li a, 
 
#dropdown li li a:link, 
 
#dropdown li li a:visited { 
 
    background: #ffffff; 
 
    width: 230px; 
 
    text-align: left; 
 
    color: #009999; 
 
    display: block; 
 
    font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif; 
 
    margin: 0; 
 
    padding: 9px 12px 10px 12px; 
 
    text-decoration: none; 
 
    z-index: 9999; 
 
    border-bottom: 0px solid #009999; 
 
} 
 
#dropdown li li a:hover, 
 
#dropdown li li a:active { 
 
    background: #ffffff; 
 
    color: #c6c1ae; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 9px 12px 10px 12px; 
 
    text-decoration: none; 
 
}

<div id="dropdownmenu"> 
 
    <ul id="dropdown"> 
 
    <a class="menuDrop"> 
 
     <li><a href="/">Item 1</a> 
 
     </li> 
 
     <li><a href="#"> 
 
    Item 2</a> 
 
     <ul> 
 
      <li><a href="#">page 1</a> 
 
      </li> 
 
      <li><a href="#">page 2</a> 
 
      </li> 
 
      <li><a href="#">page 3</a> 
 
      </li> 
 
      <li><a href="#">page 4</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 3</a> 
 
     </li> 
 
     <li><a href="#"> 
 
    Item 4</a> 
 
     <ul> 
 
      <li><a href="#">page 1</a> 
 
      </li> 
 
      <li><a href="#">page 2</a> 
 
      </li> 
 
      <li><a href="#">page 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 5</a> 
 
     </li> 
 
    </a> 
 
    </ul> 
 
</div>