CSS水平菜单，在CSS中添加类选择器导致子菜单偏离位置

Question

我想创建一个水平的两级菜单导航。我在互联网上复制了一些代码并且工作正常。以下是原始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>

由于CSS是标准UL和李元素，所以我想添加一个类选择，使其只影响水平菜单。所以我附加了.menu到每个ul样式。但是，子菜单将脱离主菜单的位置。任何想法哪种风格出错？

<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

入住这OUT-你已经错过了一些风格，也需要被应用到sub-menu。猜猜你现在可以搞清楚了。谢谢！

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