Is there a way to remove the shadow in the red area below? I have come across similar questions but unsure how to implement those solutions here.
Live Demo: http://jsfiddle.net/xFa9M/
CSS:-
#list li{
border: 2px solid black;
border-top-width: 1px;
border-bottom-width: 1px;
padding: 4em;
z-index: 1;
}
#list li .tip{
position: absolute;
left: 200px;
top: 0px;
border: 2px solid black;
border-left-width: 0px;
z-index: 0;
display: none;
}
#list li:hover{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
#list li:hover .tip{
-moz-box-shadow: -5px 5px 5px black;
-webkit-box-shadow: -5px 5px 5px black;
box-shadow: -5px 5px 5px #555;
}
Html:-
<ul id="list">
<li class="top">About Me
<div class="tip">Asas</div>
<li>Garage
<li class="bottom">My Blog
</ul>
If necessary, javascript tricks are acceptable for use.