Question

使用一个下拉菜单创建导航菜单。出于某种原因，我无法在＆＃34;主要3上找到正确的CSS放下菜单。＆＃34;有人会介意看我的CSS，看看有没有我可能错过的东西。

HTML

<ul class="navmenu">
   <li><a href="#" id="mnu_Home">Main 1</a></li>
   <li><a href="#" id="mnu_aboutus">Main 2</a></li>
   <li>
      <a href="#" id="mnu_Services">Main 3</a>
      <ul>
         <li><a href="#" id="mnu_painmanagement">Sub 1</a></li>
         <li><a href="#" id="mnu_weightloss">Sub 2 </a></li>
         <li><a href="#" id="mnu_cosmetic">Sub 3</a></li>
         <li><a href="#" id="mnu_vitamins">Sub 4</a></li>
      </ul>
   </li>
   <li><a href="#" id="mnu_testimonials">Main 4</a></li>
   <li><a href="#" id="mnu_patientforms">Main 5</a></li>
   <li><a href="#" id="mnu_contactus">Main 6</a></li>
   <li><a href="#" id="mnu_patientportal">Main 7</a></li>
</ul>

CSS

.navmenu{
    background: #510E2A;
    height: 35px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    text-align: justify;
}
.navmenu li{
    float: left;
}
.navmenu li a{
    display: block;
    padding:9px 20px;
    text-decoration: none;
    font-family: THCFontSemiBold;
    color: #f3ac3f;
    font-weight: bold;
}
.navmenu ul{
    list-style-type: none;
    position: absolute;
    z-index: 1000;
    left: -9999em;
}
.navmenu li:hover{
    position: relative;
}
.navmenu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}
.navmenu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:red;
}
.navmenu li:hover ul li a:hover { background:#005555; }

Fiddle is here

Answer 1

只需从navmenu中删除溢出

.navmenu{
    background: #510E2A;
    height: 35px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

Updated Fiddle

CSS导航菜单不会丢弃子菜单

1 个答案: