Glow за навигационным меню

Question

Я создаю небольшую анимацию с сиянием в навигации. Glow находится за навигационным меню, как показано на рисунке. Я попытался, но не ясный результат, мне нужен тот же результат, что и на картинке.

http://jsfiddle.net/naresh_kumar/GCpDW/5/

HTML

<div id="topnav" style="float:right;"> 
    <ul class="nav clearfix"> 
     <li id="menu-item-6"> 
      <a href="">Home</a> 
     </li> 
     <li id="menu-item-8"> 
      <a>Tutor Videos</a> 
     </li> 
     <li id="menu-item-7"> 
      <a>Download Font</a> 
     </li> 
     <li id="menu-item-9"> 
      <a>news</a> 
     </li> 
     </ul> 
    </div> 

CSS

body{background:#000000;} 
ul { margin-left: 20px; padding: 0; } 
#topnav { 
    font-size: 8pt; 
    font-weight: bold; 
    margin-top: 2%; 
    float: left; 
    font-size: 8pt; 
    margin-bottom: 0; 
    margin-left: 63px; 
    margin-right: 0; 
    margin-top: 4% !important; 
    padding: 0; 
    width: 60%; 
} 

#topnav ul { 
    background: none repeat scroll 0 0 #E2E2DE; 
    border: 3px solid #FFFFFF; 
    line-height: 1; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
} 

#topnav ul li { 
    float: left; 
    width: auto; 
} 

#topnav ul li a { 
    border-bottom: 15px solid transparent; 
    border-top: 15px solid transparent; 
    display: block; 
    line-height: 30px; 
    margin: -17px 0; 
} 

#topnav ul a { 
    color: #000000 !important; 
    display: block; 
    line-height: 24px; 
    padding: 5px 10px; 
    position: relative; 
    text-decoration: none; 
    z-index: 90; 
} 

#topnav ul a:hover, #topnav ul ul a:hover { 
    border-color: white; 
    color: #0A0A0A; 
    box-shadow: 0 0 50px gold, 0 0 150px gold; 
} 
.clearfix:after, blockquote:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.clearfix, blockquote { 
    display: block; 
} 
.clearfix, blockquote { 
    display: inline-block; 
} 

Answer 1

Это творится g трудно получить свечение «позади» меню, используя CSS3, но с некоторыми незначительными трюками (включая более тонкое использование цвета для свечения), вы можете сделать пример, который вы уже произвели, выглядят вполне разумно с сиянием сверху в меню

#topnav ul a:hover, #topnav ul ul a:hover { 
    border-color: white; 
    color: #0A0A0A; 
    box-shadow: 0 0 100px #ffffee, 0 0 100px #ffffee; 
}