Round navigation with overlapping CSS3 animations

I had some time to kill on friday afternoon so I decided to try if I could make a round navigation that overlaps the neighbouring menu items.

I remember seeing it done with z-index and transparent png’s in the past, but it wasn’t a solution we give clients in a content management system. Adding more z-indexes to new menu items would be far to complicated. Sure, we could probably add some server side code or even javascript to make a dynamic class, but I thought to myself surely there must be an easier way of doing it using CSS3.

As you can see it is possible…

So I thought I might as well share it in case someone else is interested or want to play around with the round navigation.

The markup

 <ul id="ID">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
    <li><a href="#">E</a></li>
    <li><a href="#">F</a></li>
    <li><a href="#">G</a></li>
    <li><a href="#">H</a></li>
    <li><a href="#">I</a></li>
    <li><a href="#">J</a></li>
    <li><a href="#">K</a></li>
    <li><a href="#">L</a></li>
    <li><a href="#">M</a></li>
    <li><a href="#">N</a></li>
    <li><a href="#">O</a></li>
    <li><a href="#">P</a></li>
    <li><a href="#">Q</a></li>
    <li><a href="#">R</a></li>
    <li><a href="#">S</a></li>
    <li><a href="#">T</a></li>
    <li><a href="#">U</a></li>
    <li><a href="#">V</a></li>
    <li><a href="#">W</a></li>
    <li><a href="#">X</a></li>
    <li><a href="#">Y</a></li>
    <li><a href="#">Z</a></li>
</ul>

The CSS

#ID li {
    float:left;
    font-size:87.5%;
    font-family:sans-serif;
    font-weight:300;
}

#ID a {
    text-decoration:none;
    font-weight:bold;
    background:#cdcc34;
        background:rgba(205,204,52,0.8);
    color:#fff;
    float:left;
    width:96px;
    height:96px;
    line-height:96px;
    -webkit-border-radius: 47px;
    -moz-border-radius:47px;
    border-radius:47px;
    text-align:center;
    -webkit-box-shadow: 0px 0px 0px 5px rgba(205, 204, 52, .3);
        -webkit-transition: box-shadow .2s ease;
    -moz-box-shadow: 0px 0px 0px 5px rgba(205, 204, 52, .3);
        -moz-transition:-moz-box-shadow .2s ease;
    box-shadow: 0px 0px 0px 5px rgba(205, 204, 52, .3);
        transition: box-shadow .2s ease;
}

#ID a:hover {
    -webkit-box-shadow: 0px 0px 0px 20px rgba(205, 204, 52, .3);
    -moz-box-shadow: 0px 0px 0px 20px rgba(205, 204, 52, .3);
    box-shadow: 0px 0px 0px 20px rgba(205, 204, 52, .3);
}

WEB DESIGN