Нужно добавить подсветку над пунктом меню который в фокусе. Как это лучше реализовать?
.menu {
width: 100vw;
height: 65px;
display: block;
text-align: center;
}
.menu #backlightZone {
width: 100%;
height: 5px;
background-color: white;
display: block;
border: 1px #E2DDD8 solid;
}
.menu #menu {
position: relative;
list-style: none;
}
.menu #menu li {
display: inline-block;
}
.menu #menu a {
display: block;
padding: 0px 15px;
text-align: center;
color: #7B7B7B;
font-family: "FuturaBTLight";
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
line-height: 60px;
}
.menu #menu li:hover>a {
color: #1C285B;
}
.menu #menu li:hover>ul {
display: block;
}
.menu #menu li ul {
display: none;
background-color: #1D275A;
width: 200px;
height: 140px;
position: absolute;
text-align: left;
;
}
.menu #menu li ul li a {
line-height: 20px;
text-transform: none;
color: white;
margin-left: 10px;
margin-top: 11px;
}
.menu #menu li ul li a:hover {
color: #C4AB2E;
}
<section class="menu">
<div id="backlightZone">
<div class="backlight" id="weddingBL"></div>
</div>
<ul id="menu">
<li><a href="">home</a></li>
<li><a href="">wedding</a>
<ul>
<li><a href="">Simple and Elegant</a></li>
<li><a href="">Pebble paper</a></li>
<li><a href="">Pocket invitations</a></li>
<li><a href="">Elegant</a></li>
</ul>
</li>
<li><a href="">baby</a></li>
<li><a href="">quinces/mitzvah</a></li>
<li><a href="">social</a></li>
<li><a href="">other products/services</a></li>
<li><a href="">online consultation</a></li>
<li><a href="">blog</a></li>
<li><a href="">white papers</a></li>
<li><a href="">contact us</a></li>
</ul>
</section>