하위 메뉴에서 CSS 박스 섀도우 호버

Question

내 Wordpress 하위 테마에 대한 CSS 덮어 쓰기가 있습니다. 마우스 오버시에 상자 섀도우를 계속 표시하는 방법에 대한 내 머리를 얻을 수 없습니다.

.menu { 
    background-color: #8a8a8a; 
    background-image: none; 
    clear: both; 
    filter: none; 
    text-transform: uppercase; 
} 

.main-nav { 
    clear: both; 
} 

.menu, 
.menu ul { 
    display: block; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

.menu li { 
    border: 0; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    z-index: 5; 
} 

.menu li:hover { 
    white-space: normal; 
    z-index: 99999; 
} 

.menu li li { 
    float: none; 
} 

.menu ul { 
    left: 0; 
    position: absolute; 
    top: 0; 
    visibility: hidden; 
    z-index: 10; 
} 

.menu li:hover > ul { 
    top: 100%; 
    visibility: visible; 
} 

.menu li li:hover > ul { 
    left: 100%; 
    top: 0; 
} 

.menu:after, 
.menu ul:after { 
    clear: both; 
    content: '.'; 
    display: block; 
    height: 0; 
    overflow: hidden; 
    visibility: hidden; 
} 

.menu, 
.menu ul { 
    min-height: 0; 
} 

.menu ul, 
.menu ul ul { 
    margin: 0; 
    padding: 0; 
} 

.menu ul li a:hover, 
.menu li li a:hover { 
    color: #00ACA1; 
    text-decoration: none; 
} 

.menu ul { 
    margin-top: 1px; 
    min-width: 15em; 
    width: auto; 
} 

.menu a { 
    border-left: none; 
    color: #ffffff; 
    cursor: pointer; 
    display: block; 
    font-size: 12px; 
    font-weight: 700; 
    height: 35px; 
    line-height: 35px; 
    margin: 0; 
    padding: 0 0.9em; 
    position: relative; 
    text-decoration: none; 
    text-shadow: none; 
    white-space: nowrap; 
} 

.menu a:hover { 
    background-color: #f1f1f1; 
    background-image: none; 
    color: #00ACA1; 
    filter: none; 
} 

ul.menu > li:hover { 
    background-color: #ffffff; 
    color: #00ACA1; 
} 

.menu .current_page_item a, 
.menu .current-menu-item a { 
    background-color: #ffffff; 
    color: #00ACA1; 
} 

.front-page .menu .current_page_item a { 
    background-color: ffffff; 
    background-image: none; 
    filter: none; 
    color: #00ACA1; 
} 

.menu li li { 
    background: #ffffff; 
    background-image: none; 
    border: 1px solid #cbcbcb; 
    color: #00ACA1; 
    filter: none; 
    margin: -1px 0 1px 0; 
    width: auto; 
    -webkit-box-shadow: 2px 3px 3px #8a8a8a; 
    -moz-box-shadow: 2px 3px 3px #8a8a8a; 
    box-shadow: 2px 3px 3px #8a8a8a; 
} 

.menu li li a { 
    background: transparent !important; 
    border: none; 
    color: #00ACA1; 
    font-size: 12px; 
    font-weight: 400; 
    height: auto; 
    height: 20px; 
    line-height: 20px; 
    padding: 5px 10px; 
    text-shadow: none; 
    white-space: nowrap; 
} 

.menu li:hover > a{ 
    color:#00ACA1; 
    background: #ffffff; 
} 

.menu li li a:hover { 
    background: #f1f1f1 !important; 
    color: #00ACA1; !important; 
    background-image: none; 
    border: 0; 
    filter: none; 
} 

.menu li li:hover { 
    background: #f1f1f1 !important; 
    filter: none; 
    -box-shadow: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
} 

.menu ul > li + li { 
    border-top: 0; 
} 

.menu li li:hover > ul { 
    left: 100%; 
    top: 0; 
} 

.menu > li:first-child > a { 
    border-left: none; 
} 

.menu a#responsive_menu_button { 
    display: none; 
} 

.main-nav #responsive_current_menu_item { 
    display: none; 
} 

/*.js .main-nav .menu {*/ 
/*display: block;*/ 
/*}*/ 

어떤 조언을 해주셔서 감사합니다! 나는 완전한 멍청한 놈이야. 그래서 핵심 CSS에서 코드를 편집했다. (반응 형)

Answer 1

감사합니다. dingo_d! 그게 날 도와 줬어!

.menu li:hover > ul { 
    top: 100%; 
    visibility: visible; 
    box-shadow: 2px 2px 3px #8a8a8a; 
} 

.menu li li:hover > ul { 
    left: 100%; 
    top: 0; 
    box-shadow: 2px 2px 3px #8a8a8a; 
}