problem with nav in css

Well I created a nav with class = topbar and tried calling in css but it is not going to:

<nav class="topBar">
<ul>
<a href="#"><li>Inicio</li></a>
<a href="#"><li>Inicio</li></a>
<a href="#"><li>Inicio</li></a>
<a href="#"><li>Inicio</li></a>
</ul>
</nav>
<img src="images/logosecure.png">
</header>

css

    @charset "utf-8";
*{margin:0;padding:0;}
header{
    width: 100%;
    height: 200px;

}
section{
    width: 100%;
    height: 500px;
    background: #ccc;
}
footer{
    width: 100%;
    height: 50px;
    background: #000;
}
a{
    text-decoration: none;
}
.topBar nav{
    width: 100%;
    margin:0 auto;
    background: #000;
}
.topBar nav ul li{
    background: #000;
    color:#fff;
    display: inline-block;
    padding: 10px 20px;
    border-bottom: 2px solid #000;
}
.topBar nav ul li:hover{
    cursor: pointer;
    border-bottom: 2px solid #fff;
}

photo: