Blur filter behind drop down menu in CSS

Question

This sounds impossible, but is it possible to have a blur filter behind a drop down menu? This is what the HTML looks like:

<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>

And 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;
}

Seeing as that I didn't find anything about this on the Internet, I wouldn't be surprised if this wasn't possible. The drop down menu is partly transparent and I would really like a Windows Aero or iOS 7 style menu.

I found something about this on [stackoverflow, on the internet](http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css) this should answer your question. — Dom, Jun 25 '15 at 05:50

Karan · Answer 1 · 2015-06-25T15:40:33.957

You can try this

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;
}

See this : Jsfiddle example

Blur filter behind drop down menu in CSS

1 Answers1