We have added a (yet unused) <li class="cursor"> element at the end of the first and second levels. What we want to create is a block that is able to move under the element when the mouse hovers over it. It's a nice effect, and to achieve it we are going to use CSS3 transitions. But first let's create the same effect without animation:
nav > ul{
position: relative;
}
nav li.cursor{
position: absolute;
background-color: #75BD46;
text-indent: 900px;
border: none;
height: 3em;
z-index: 1;
left: 11px;
clip: rect(0,0,0,0);
box-shadow:
0px 0px 10px rgba(0,0,0,0.1),
0px -1.5em 0px rgba(0,0,0,0.1) inset,
0px 1px 1px 1px rgba(0,0,0,0.1) inset;
}
nav li.cursor a{
display: none;
}
nav > ul > li > ul > li.cursor{
height: 2.5em;
left: 0px;
width: 100%;
bottom: 0.7em;
box-shadow: none;
background-image: none;
background-color: rgb(165,204,60);
background-color: rgba(165,204,60,0.7);
z-index: 3;
}
nav > ul li...