подменят скрываются в навигации DIV

Question

я кодирование клиента сайта http://scratchmediaohio.com/wordpress/

Когда я закодирован локально, подменит не было никаких проблем, показывая на парении, но теперь, как я медленно интеграцию в WordPress, я м, имеющих различные проблемы, пытаясь заставить его появиться. Я пробовал z-индексирование и т. Д., Я уверен, что переусердствовал что-то или что-то упустил, но у меня заканчиваются идеи.

код 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 и попытался тонкой настройки, как это были проблемы в начале.

Answer 1

Вы #navigation ul является overflow:hidden;

При внесении изменений его:

#navigation ul { 
    overflow: visible; 
} 

Ваше подменю покажет

Answer 2

У вас есть несколько вещей неправильно с HTML, на вашем сайте, но ответить на ваш вопрос выше ...

Во-первых, удалить скрытый стиль переполнения с nav ul.

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

Затем примените эти два стиля:

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