Фильтр размытия за выпадающим меню в CSS

Это звучит невозможно, но возможно ли иметь фильтр размытия за выпадающим меню? Это то, что HTML выглядит следующим образом:Фильтр размытия за выпадающим меню в CSS

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

Видя, как я не нашел ничего об этом в Интернете, я не удивлюсь, если это WASN» возможно. Выпадающее меню частично прозрачно, и мне бы очень понравилось меню стиля Windows Aero или iOS 7.

источник

2015-06-25 johniel

вы можете попробовать css pseudo selector: до –

Я нашел что-то об этом на [stackoverflow, в Интернете] (http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect -using-css), это должно ответить на ваш вопрос. –

Вы можете попробовать это

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

источник

2015-06-25 06:06:39 Karan

Фильтр размытия за выпадающим меню в CSS

ответ

Смежные вопросы