CSS, 帮助添加子菜单到下拉菜单

Question

我正在尝试向下拉菜单中添加 "sub menu"。假设我想为项目 3 添加一个子菜单（请参阅 html），我该怎么做？

谢谢，

这是我的 CSS:

.nav_menu {
    width:100%;
    background-color:#EFEFEF;
    z-index:2000;
    border:1px solid #ccc;
}
.selected {
    background-color:#ccc;
    color:#333;
}
.nav_menu a:link {
    color:#007dc1;
}
.nav_menu a:visited {
    color:#007dc1;
}
.nav_menu a:hover {
    color:#007dc1;
}
.nav_menu ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}
.nav_menu ul li {
    font-size:16px;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 8px 22px;
    font-weight:600;
    transition: all 50ms linear;
    transition-delay: 0s;
}
.nav_menu ul li ul {
    padding: 0;
    position: absolute;
    top: 37px;
    left: 0;
    width: 230px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    display: block;
    opacity: 0;
    -webkit-transition: opacity .2s;
    z-index:50000;
}
.nav_menu ul li ul li { 
    background-color:#535353;
    border-top:1px solid #fff;
    display: block; 
    font-size:12px;
    color:#fff;
}
.nav_menu ul li ul li:hover { 
    background: #B2B2B2; 
}
.nav_menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

这是我的 HTML:

<ul>
 <li>All Items
   <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3 with Sub Menu</li>
   </ul>
 </li>
</ul>

Answer 1

根据您发布的 css 判断：

.nav_menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

看来你必须在子菜单 li 中添加另一个 ul:

<ul>
 <li class='nav-menu'>All Items
   <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3 with Sub Menu
      <ul>
        <li>SubItem 3.1</li>
        <li>SubItem 3.2</li>
      </ul>
    </li>
   </ul>
 </li>
</ul>

Fiddle 用于演示 http://jsfiddle.net/ee9ebv2s/

Answer 2

首先，由于您的菜单仅基于 CSS :hover 伪 class，请确保您的 ul 和 li 元素之间没有任何 space，因为这会导致整个菜单消失。

HTML代码

<div class='nav_menu'>
    <ul>
     <li>All Items
       <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li class='nav_menu_sub'>Item 3 with Sub Menu
          <ul>
            <li>SubItem 3.1</li>
            <li>SubItem 3.2</li>
          </ul>
        </li>
       </ul>
     </li>
    </ul>
</div>

就像您已经提供的下拉菜单一样，只需在 li 元素中添加一个 ul 元素就足以创建子菜单。我在打开子菜单的 li 中添加了一个 nav_menu_sub class，使通过 CSS 更容易 select（避免 .nav_menu ul li ul li）。

CSS代码

.nav_menu_sub {
    padding:0;
    margin:0;
}

.nav_menu_sub ul {
    margin-top:-7px;
    display: none !important;
}

.nav_menu_sub:hover ul {
    display: block !important;
    opacity: 1;
    visibility: visible;  
}

添加了 ul 元素上的 margin-top:-7px 以确保它与 li 相得益彰。

将 !important 添加到显示属性以使其覆盖之前声明的样式。

工作 jsFiddle：http://jsfiddle.net/akhrbkug/

CSS, 帮助添加子菜单到下拉菜单

CSS, Help adding sub menu to drop down menu

html

css

submenu

drop-down-menu