CSS imgBox Links not working

I'm trying to code a Nav bar for my site but as soon as I implemented css imgBox my links stopped working. The're in the same directory so I don't believe this is the problem but for the life of me I can't figure out what's wrong here's the HTML code

<ul id="menu">
    <li> <div class="imgBox"  id="img1"> <a href="index.html"> </a> </div> </li>
    <li> <div class="imgBox"  id="img2"> <a href="Media.html"> </a> </div> </li>  
    <li> <div class="imgBox"  id="img3"> <a href="social-media.html"> </a> </div> </li>
</ul>

and here's the css

.imgBox
{
    float:left;
    border: 1px solid #9325BC;
}
#img1
{
    background: url(images/home.png) no-repeat;
    width: 129px;
    height: 50px;
}

#img2
{
    background: url(images/media.png) no-repeat;
    width: 112px;
    height: 50px;
}

.imgBox:hover
{
    -moz-box-shadow: 0 0 30px #0000cc;
    -webkit-box-shadow: 0 0 30px #0000cc;
    box-shadow: 0 0 30px #0000cc;
}

Any help will be greatly appreciated

Solution

<ul id="menu">
<li><a href="index.html"> <div class="imgBox"  id="img1">  </div></a> </li>
<li><a href="Media.html"> <div class="imgBox"  id="img2"></a>  </li>  
<li><a href="social-media.html">  <div class="imgBox"  id="img3"> </a></li>
</ul>

Is this what you're trying to do?