移除下拉阴影答案

【问题标题】：Remove dropdown shadow移除下拉阴影
【发布时间】：2014-03-31 09:18:50
【问题描述】：

我正在为客户创建一个网站，并希望删除下拉菜单上的蓝色“阴影”。我认为我必须编辑的代码如下：

.main_nav ul.sub-menu {
    position: absolute;
    top: 65px;
    width: auto;
    min-width: 150px;
    z-index: 9999;
    list-style-type: none;
    float: right;
    left: 0;
    display: none;
    visibility: hidden;
    height: 0;
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

你能帮我解决这个问题吗？ http://makeskate.wpengine.com/

【问题讨论】：

标签： css menu shadow

【解决方案1】：

只需从您的 css 代码中删除它：

.main_nav li:hover a, .link-active, .current-menu-item a {
    box-shadow: 0px -5px 0px rgba(255, 255, 255, 0.3) inset, 0px 2px 0px rgba(255, 255, 255, 0.2) inset;
}

并从这里删除背景：

.skill_set, .soft_skill span, .submit_button, .main_nav li:hover a, .link-active, .current-menu-item a, .main_nav ul.sub-menu, .button, #submit, .wpcf7-submit, .post .date, .tags a, .entry-footer li a:hover, .post-content .wp-caption, .comment .comment-meta .comment-reply-link:hover, #searchsubmit {
    background: none repeat scroll 0% 0% #34799E;
}

【讨论】：

【解决方案2】：

将box-shadow:none 添加到您的.main_nav li:hover a 样式中

.main_nav li:hover a, .link-active, .current-menu-item a{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

如果要去除蓝色背景色，请使用以下样式

.main_nav li:hover a, .link-active, .current-menu-item a{
   background-color: rgba(255,255,255,0);  // to remove the blue background and add transparent background
}

【讨论】：