CSS水平メニュー、CSSでクラスセレクタを追加するとサブメニューがオフ位置になります

Question

水平2レベルのメニューナビゲーションを作成します。私はインターネット上のいくつかのコードをコピーし、正常に動作します。 CSSは、標準的なULおよびLi要素の上にあるので、私はそれだけ影響を与えるように、クラスセレクタを追加したいので、下記のオリジナルのCSSスタイルとHTML

<style> 
 
    /*Style for horizontal CSS menu*/ 
 
    ul { 
 
    list-style-type: none; 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    ul li { 
 
    float: left; 
 
    margin-right: 1px; 
 
    display: inline-block; 
 
    } 
 
    ul li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    height: 18px; 
 
    min-width: 120px; 
 
    text-align: center; 
 
    line-height: 18px; 
 
    font-family: Arial, "Times New Roman", Georgia; 
 
    color: #ffffff; 
 
    background: #004080; 
 
    font-size: 12px; 
 
    } 
 
    ul li:hover a { 
 
    background: #FFC062; 
 
    } 
 
    ul li:hover ul a { 
 
    background: #d9efff; 
 
    color: #2f3036; 
 
    line-height: 18px; 
 
    height: 18px; 
 
    } 
 
    ul li:hover ul a:hover { 
 
    background: #7db0db; 
 
    color: #ffffff; 
 
    } 
 
    ul li ul { 
 
    display: none; 
 
    } 
 
    ul li ul li { 
 
    display: block; 
 
    float: none; 
 
    border-left: 1px solid #000; 
 
    border-right: 1px solid #000; 
 
    border-bottom: 1px solid #000; 
 
    } 
 
    ul li ul li:first-child { 
 
    display: block; 
 
    float: none; 
 
    border-top: 1px solid #000; 
 
    } 
 
    ul li ul li a { 
 
    width: auto; 
 
    min-width: 120px; 
 
    padding: 0 15px; 
 
    text-align: left; 
 
    color: #000; 
 
    } 
 
    ul li a:hover + .sub-menu, 
 
    .sub-menu:hover { 
 
    display: block; 
 
    } 
 
</style> 
 

 

 
<ul id="hor-menu" class="menu"> 
 
    <li style="width:142px"> 
 
    <a href="#">Home</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Country 1</a> 
 
     </li> 
 
     <li><a href="#">Country 1</a> 
 
     </li> 
 
     <li><a href="#">Country 1</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li style="width:130px"> 
 
    <a href="#">Main Menu 2</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li style="width:130px"> 
 
    <a href="#">Main Menu 2</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

です水平メニュー。だから私は各ULスタイルに.menuを追加します。ただし、サブメニューはメインメニューの位置から外れることになります。どのスタイルが間違っているのか？

<style> 
 
    /*Style for horizontal CSS menu*/ 
 
    ul.menu { 
 
     list-style-type: none; 
 
     position: absolute; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    ul.menu li { 
 
     float: left; 
 
     margin-right: 1px; 
 
     display: inline-block; 
 
    } 
 

 
    ul.menu li a { 
 
     display: block; 
 
     text-decoration: none; 
 
     height: 18px; 
 
     min-width: 120px; 
 
     text-align: center; 
 
     line-height: 18px; 
 
     font-family: Arial, "Times New Roman", Georgia; 
 
     color: #ffffff; 
 
     background: #004080; 
 
     font-size: 12px; 
 
    } 
 

 
    ul.menu li:hover a { 
 
     background: #FFC062; 
 
    } 
 

 
    ul.menu li:hover ul a { 
 
     background: #d9efff; 
 
     color: #2f3036; 
 
     line-height: 18px; 
 
     height: 18px; 
 
    } 
 

 
    ul.menu li:hover ul a:hover { 
 
     background: #7db0db; 
 
     color: #ffffff; 
 
    } 
 

 
    ul.menu li ul { 
 
     display: none; 
 
    } 
 

 
    ul.menu li ul li { 
 
     display: block; 
 
     float: none; 
 
     border-left: 1px solid #000; 
 
     border-right: 1px solid #000; 
 
     border-bottom: 1px solid #000; 
 
    } 
 

 
    ul.menu li ul li:first-child { 
 
     display: block; 
 
     float: none; 
 
     border-top: 1px solid #000; 
 
    } 
 

 
    ul.menu li ul li a { 
 
     width: auto; 
 
     min-width: 120px; 
 
     padding: 0 15px; 
 
     text-align: left; 
 
     color: #000; 
 
    } 
 

 
    ul.menu li a:hover + .sub-menu, .sub-menu:hover { 
 
     display: block; 
 
    } 
 
</style> 
 

 

 
<ul id="hor-menu" class="menu"> 
 
    <li style="width:142px"> 
 
    <a href="#">Home</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Country 1</a> 
 
     </li> 
 
     <li><a href="#">Country 1</a> 
 
     </li> 
 
     <li><a href="#">Country 1</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li style="width:130px"> 
 
    <a href="#">Main Menu 2</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li style="width:130px"> 
 
    <a href="#">Main Menu 2</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

あなたもsub-menuに適用する必要があるいくつかのスタイルを見逃しているOUT-これをチェックしてください。あなたは今それを理解することができると思います。ありがとう！

/*Style for horizontal CSS menu*/ 
 

 
ul.menu, ul.sub-menu { 
 
    list-style-type: none; 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul.menu li, ul.sub-menu li { 
 
    float: left; 
 
    margin-right: 1px; 
 
    display: inline-block; 
 
} 
 
ul.menu li a, ul.sub-menu li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    height: 18px; 
 
    min-width: 120px; 
 
    text-align: center; 
 
    line-height: 18px; 
 
    font-family: Arial, "Times New Roman", Georgia; 
 
    color: #ffffff; 
 
    background: #004080; 
 
    font-size: 12px; 
 
} 
 
ul.menu li:hover a, ul.sub-menu li:hover a { 
 
    background: #FFC062; 
 
} 
 
ul.menu li:hover ul a { 
 
    background: #d9efff; 
 
    color: #2f3036; 
 
    line-height: 18px; 
 
    height: 18px; 
 
} 
 
ul.menu li:hover ul a:hover { 
 
    background: #7db0db; 
 
    color: #ffffff; 
 
} 
 
ul.menu li ul { 
 
    display: none; 
 
} 
 
ul.menu li ul li { 
 
    display: block; 
 
    float: none; 
 
    border-left: 1px solid #000; 
 
    border-right: 1px solid #000; 
 
    border-bottom: 1px solid #000; 
 
} 
 
ul.menu li ul li:first-child { 
 
    display: block; 
 
    float: none; 
 
    border-top: 1px solid #000; 
 
} 
 
ul.menu li ul li a { 
 
    width: auto; 
 
    min-width: 120px; 
 
    padding: 0 15px; 
 
    text-align: left; 
 
    color: #000; 
 
} 
 
ul.menu li a:hover + .sub-menu, 
 
.sub-menu:hover { 
 
    display: block; 
 
}

<ul id="hor-menu" class="menu"> 
 
    <li style="width:142px"> 
 
    <a href="#">Home</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Country 1</a> 
 
     </li> 
 
     <li><a href="#">Country 1</a> 
 
     </li> 
 
     <li><a href="#">Country 1</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li style="width:130px"> 
 
    <a href="#">Main Menu 2</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li style="width:130px"> 
 
    <a href="#">Main Menu 2</a> 
 
    <ul class="sub-menu"> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
     <li><a href="#">Sub Menu</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>