Glow behind the navigation menu - html

Question

I am creating a little animation with glow in navigation.
Glow is behind the navigation menu as seen in picture.
I tried but not clear result, I need same result as shown in picture.
http://jsfiddle.net/naresh_kumar/GCpDW/5/
HTML
<div id="topnav" style="float:right;">
<ul class="nav clearfix">
<li id="menu-item-6">
Home
</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

It's going to be difficult to get the glow 'behind' the menu just using CSS3 but with some minor tweaks (including more subtle use of colour for the glow) you can make the example you have already produced look quite reasonable with the glow on top of the menu
#topnav ul a:hover, #topnav ul ul a:hover {
border-color: white;
color: #0A0A0A;
box-shadow: 0 0 100px #ffffee, 0 0 100px #ffffee;
}