Crear un menu solo con CSS

• <ul>

  <li class="active"><a href="#inicio">Inicio</a></li>

  <li><a  href="#inicio">Blog</a></li>

  <li><a href="#inicio">Acerca de</a></li>

    </ul>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus est eligendi ullam qui, fugit quis assumenda dicta cupiditate a aperiam adipisci eveniet? Eum illo consequatur reiciendis in quae facere alias?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus est eligendi ullam qui, fugit quis assumenda dicta cupiditate a aperiam adipisci eveniet? Eum illo consequatur reiciendis in quae facere alias?
</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus est eligendi ullam qui, fugit quis assumenda dicta cupiditate a aperiam adipisci eveniet? Eum illo consequatur reiciendis in quae facere alias?
</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus est eligendi ullam qui, fugit quis assumenda dicta cupiditate a aperiam adipisci eveniet? Eum illo consequatur reiciendis in quae facere alias?
</p>
    </div>

body{
background-color: #eee;

}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
}
li {
    float: left;
}
li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}
li:hover {
    background-color: rgba(0,0,0,0.3);
}
.active {
    background-color: green;
}
.content{
    margin-top: 55px;
}