html - CSS下拉菜单后面的模糊过滤器

Question

这听起来不可能，但是否可以在下拉菜单后面添加模糊滤镜？这是 HTML 的样子:

<nav class="menu">
    <ul>
        <li><a id="button1" href="index.html">Home</a></li>
        <li><a id="button2" href="#">Courses</a></li>
        <li><a id="button3" href="">Enrol</a></li>
        <li>
            <a id="button4" href="#">Day Categories</a>
            <ul class="sub-menu">
                <li><a href="">Sunday</a></li>
                <li><a href="">Monday</a></li>
                <li><a href="">Tuesday</a></li>
                <li><a href="">Wednesday</a></li>
                <li><a href="">Thursday</a></li>
                <li><a href="">Friday</a></li>
                <li><a href="">Saturday</a></li>
            </ul>
        </li>
    </ul>
</nav>

和 CSS:

.menu li:hover .sub-menu {
    z-index: 1;
    opacity: 0.95;
}

.sub-menu {
    margin-top: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 160%;
    position:absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: all 0.75s ease;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background-color: #3066be;
}

.sub-menu li {
    display: block;
    font-size: 16px;
}

.sub-menu li a {
    padding: 10px 30px;
    display: block;
}

鉴于我在 Internet 上没有找到任何相关信息，如果这不可能，我也不会感到惊讶。下拉菜单是部分透明的，我非常喜欢 Windows Aero 或 iOS 7 风格的菜单。

Answer 1

你可以试试这个

HTML

<nav class="menu">
<ul>
    <li><a id="button1" href="index.html">Home</a></li>
    <li><a id="button2" href="#">Courses</a></li>
    <li><a id="button3" href="">Enrol</a></li>
    <li>
        <a id="button4" href="#">Day Categories</a>
        <ul class="sub-menu">
            <li><a href="">Sunday</a></li>
            <li><a href="">Monday</a></li>
            <li><a href="">Tuesday</a></li>
            <li><a href="">Wednesday</a></li>
            <li><a href="">Thursday</a></li>
            <li><a href="">Friday</a></li>
            <li><a href="">Saturday</a></li>
        </ul>
    </li>
</ul>

CSS

.menu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.menu li{
    font-size: 30px;
    display: block;
}
.sub-menu {
    margin-top: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 160%;
    position:absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: all 0.75s ease;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background-color: #3066be;
}
.menu li a{
    color: black;
    display: block;
    text-transform: uppercase;
    text-shadow: 0px 0px 5px #fff;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.menu:hover li a{
    text-shadow: 0px 0px 5px #0d1a3a;
}
.menu li a:hover{
    color: #fff;
    text-shadow: 0px 0px 1px #fff;
    padding-left: 10px;
}

看这个:Jsfiddle example