子菜單懸停的CSS盒子陰影

Question

我有一個CSS重寫爲我的WordPress的子主題，我無法讓我的頭周圍如何讓懸停時顯示的盒陰影。

.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;*/ 
/*}*/ 

感謝您的任何建議！我是一個完整的noob，所以我剛剛編輯了主wordpress主題（響應）的核心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; 
}