子菜单隐藏在导航DIV

我编码客户现场http://scratchmediaohio.com/wordpress/子菜单隐藏在导航DIV

当我在本地编码，子菜单显示了悬停起来没有问题，但现在因为我慢慢地集成到WordPress，我有各种问题试图让它出现。我尝试过z-indexing等等，我确定我已经过了某些东西或者忽略了某些东西，但是我没有想法。

CSS代码：

#navigation { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: 'sinkin_sans400_regular'; 
 
    font-size: 13px; 
 
    font-weight: normal; 
 
    text-transform: uppercase; 
 
    background: rgb(58,58,58); 
 
    border-top: solid 3px #fff; 
 
    border-bottom: solid 3px #fff; 
 
    /* 
 
    box-shadow: 0px -2px 3px -1px rgba(0, 0, 0, 1); 
 
    */ 
 
} 
 

 
#navigation li { 
 
    float: left; 
 
} 
 

 
#navigation li:hover { 
 
    background: #f2dcc7; 
 
    color: white; 
 
    -webkit-border-radius: 0px 0px 8px 8px; 
 
    -moz-border-radius: 0px 0px 8px 8px; 
 
    border-radius: 8px 8px 0px 0px; 
 
} 
 

 
#navigation li:first-child { 
 
    
 
} 
 

 
#navigation li a { 
 
    display: block; 
 
    padding: 12px 20px; 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    line-height: 40px; 
 
    color: #6d4927; 
 
} 
 

 
#navigation li a:hover { 
 
\t color: #6d4927; 
 
} 
 

 
#navigation ul { 
 
    /*display: none;*/ 
 
    position: absolute; 
 
    list-style: none; 
 
    margin-left: -3px; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
#navigation ul li { 
 
    /*float: none;*/ 
 
} 
 

 
#navigation li:hover > ul { 
 
    display: block; 
 
    background: #f2dcc7; 
 
    border: solid 3px #fff; 
 
    color: #6d4927; 
 
    border-top: 0; 
 
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); 
 
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); 
 
    -webkit-border-radius: 0px 0px 8px 8px; 
 
    -moz-border-radius: 0px 0px 8px 8px; 
 
    border-radius: 0px 0px 8px 8px; 
 
} 
 

 
#navigation li:hover > ul li:hover { 
 
} 
 

 
#navigation li li a:hover { 
 
    background: #d69f6b; 
 
    color: white; 
 
} 
 

 
.sub-menu {}

作为一个说明，我没有抓住从codepen这个子菜单代码，并试图调整它，因为它在开始时的问题。

来源

2015-08-28 Ashley Duncan

您#navigation ul是overflow:hidden;

通过将其修正到：

#navigation ul { 
    overflow: visible; 
}

你的子菜单会显示

来源

2015-08-28 13:25:47 Djave

它不是perfact answer..by此菜单将在那里甚至其悬停或not..so请编辑你的答案或只是不：

#navigation ul {/*overflow: hidden;*/}

然后应用这两种风格快速给出低水平的答案..细 –

你有几件事错了你的HTML，您的网站，但回答你的问题以上...

首先从导航栏中删除溢出隐藏样式。那么

.sub-menu {display: none;} 
li.menu-item-has-children:hover > .sub-menu {display: block;}

来源

2015-08-28 13:40:08 Aaron

子菜单隐藏在导航DIV

回答

相关问题