无法访问子菜单

我试图创建菜单和子菜单之间的差距，但目前为止没有处理。当我按下子菜单时，同样变得无法访问。另一件事是我不想推下内容，只是子菜单。无法访问子菜单

HTML：

<nav class="site-navigation" role="navigation"> 
    <ul class="menu"> 
     <li class="menu-item"><a href="http://wpthemetestdata.wordpress.com/">Home</a> 
     </li> 
     <li class="menu-item"><a href="http://wp.dev/blog/">Blog</a> 
     </li> 
     <li class="menu-item"><a href="http://wp.dev/about/">About The Tests</a> 

      <ul class="sub-menu"> 
       <li class="menu-item "><a href="http://wp.dev/about/page-image-alignment/">Page Image Alignment</a> 
       </li> 
       <li class="menu-item "><a href="http://wp.dev/about/page-markup-and-formatting/">Page Markup And Formatting</a> 
       </li> 
       <li class="menu-item "><a href="http://wp.dev/about/clearing-floats/">Clearing Floats</a> 
       </li> 
       <li class="menu-item current-menu-item"><a href="http://wp.dev/about/page-with-comments/">Page with comments</a> 
       </li> 
       <li class="menu-item"><a href="http://wp.dev/about/page-with-comments-disabled/">Page with comments disabled</a> 
       </li> 
      </ul> 
     </li> 
     <li class="menu-item menu-parent-item"><a href="http://wp.dev/level-1/">Level 1</a> 

      <ul class="sub-menu"> 
       <li class="menu-item menu-parent-item"><a href="http://wp.dev/level-1/level-2/">Level 2</a> 

        <ul class="sub-menu"> 
         <li class="menu-item"><a href="http://wp.dev/level-1/level-2/level-3/">Level 3</a> 
         </li> 
         <li class="menu-item"><a href="http://wp.dev/level-1/level-2/level-3a/">Level 3a</a> 
         </li> 
         <li class="menu-item"><a href="http://wp.dev/level-1/level-2/level-3b/">Level 3b</a> 
         </li> 
        </ul> 
       </li> 
       <li class="menu-item"><a href="http://wp.dev/level-1/level-2a/">Level 2a</a> 
       </li> 
       <li class="menu-item"><a href="http://wp.dev/level-1/level-2b/">Level 2b</a> 
       </li> 
      </ul> 
     </li> 
     <li class="menu-item"><a href="http://wp.dev/lorem-ipsum/">Lorem Ipsum</a> 
     </li> 
    </ul> 
</nav>

CSS：

.site-navigation { 
    text-align: left; 
    float: right; 
    margin: 0; 
    background: #eee; 
} 
.site-navigation .menu { 
    font-family:'PT Sans', Helvetica, Arial, sans-serif; 
    font-style: normal; 
    font-weight: 700; 
    font-size: 1.125rem; 
    line-height: 1.5; 
} 
.site-navigation > ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.site-navigation ul > li { 
    float: left; 
    position: relative; 
    margin: 0 0 0 2rem; 
} 
.site-navigation li > a { 
    padding:0; 
    /* Padding around each top level menu option (if needed) */ 
} 
.site-navigation .sub-menu > li { 
    margin: 0; 
    padding: 0 0 5px 0; 
} 
.site-navigation a { 
    display: block; 
    text-decoration: none; 
    color: #333; 
    /* Nav bar link color */ 
} 
.site-navigation .sub-menu a { 
    padding: 0 5px; 
    /* Padding around each dropdown menu option */ 
    font-size: 1rem; 
} 
.site-navigation .sub-menu { 
    display: none; 
    position: absolute; 
    left: 0; 
    z-index: 99999; 
    background-color: #333; 
    /* Nav bar dropdown background color */ 
    -webkit-box-shadow:2px 2px 5px 0px rgba(0, 0, 0, 0.6); 
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.6); 
} 
.site-navigation .sub-menu ul { 
    left: 100%; 
    top: 0; 
} 
.site-navigation .sub-menu a { 
    color: #fff; 
    /* Nav bar dropdown link color */ 
    width: 11rem; 
    /* Nav bar dropdown width */ 
} 
.site-navigation .sub-menu :hover > a { 
    color: #333; 
    /* Nav bar dropdown level 2 link color on level 3 hover */ 
    background-color: #fafafa; 
    /* Nav bar dropdown link background color on hover */ 
} 
.site-navigation li ul { 
    margin-top: 20px; 
    position: relative; 
} 
.site-navigation ul li:hover > ul { 
    display: block; 
} 
.site-navigation ul li.dropdown-header a, .site-navigation ul li.current-menu-item ul .dropdown-header a { 
    color: #aaa; 
    /* Nav bar dropdown header color */ 
    background-color: #333; 
    /* Nav bar dropdown header background color */ 
}

来源

2013-10-14 Daniel

设置背景的li代替ul，并添加填充顶：

.site-navigation .sub-menu { 
    display: none; 
    position: absolute; 
    left: 0; 
    z-index: 99999; 
    padding-top: 20px; 
} 
.site-navigation .sub-menu li { 
    background-color: #333; 
    /* Nav bar dropdown background color */ 
    -webkit-box-shadow:2px 2px 5px 0px rgba(0, 0, 0, 0.6); 
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.6); 
}

updated Fiddle

来源

2013-10-14 07:45:58 LinkinTED

这里是一个快速修复：

.site-navigation .menu > li > a { 
    margin-bottom: 20px; 
    padding-bottom: 20px; 
}

但你真的应该返工菜单。我建议你为.sub菜单添加一个填充顶部，但是为此你必须将背景颜色移动到一个（例如）子菜单包装上，这样可以保持视觉差距。

来源

2013-10-14 07:40:53 Sven

我觉得这个链接可能会有所帮助。

jsfiddle

HTML

<div style="display:inline-block" id="menu1outer"> 
<a href=""><div class="menus">Menu 1</div></a> 
<a href=""><div id="submenus1" class="submenus">Sub 1</div><a/> 
<a href=""><div id="submenus1" class="submenus">Sub 2</div><a/> 
<a href=""><div id="submenus1" class="submenus">Sub 3</div><a/> 
</div> 

<div style="margin-left:50px;display:inline-block" id="menu2outer"> 
<a href=""><div class="menus">Menu 2</div></a> 
<a href=""><div id="submenus2" class="submenus">Sub 1</div><a/> 
<a href=""><div id="submenus2" class="submenus">Sub 2</div><a/> 
<a href=""><div id="submenus2" class="submenus">Sub 3</div><a/> 
</div>

CSS

.menus { 
    width:100px; 
    height:50px; 
    border: 5px solid #000000; 
    border-radius: 25px; 
    text-align: center; 
    line-height: 50px; 
} 
.submenus { 
    margin-top:10px; 
    display:none; 
    width:100px; 
    height:50px; 
    border: 5px solid #000000; 
    border-radius: 25px; 
    text-align: center; 
    line-height: 50px; 
    color: black; 
} 
#menu1outer:hover #submenus1 { 
    display: block; 
} 
#menu2outer:hover #submenus2 { 
    display: block; 
}

来源

2013-10-14 07:43:37 Tamil

无法访问子菜单

回答

相关问题