RV Types

<nav class="rv-types">
    <ul>
        <li><a href="/product/travel-trailer"><img src="//assets-cdn.interactcp.com/demo/images/rv-type-tt.png" alt="" /></a> <span class="rv-types-content"><span class="rv-types-title"><a href="/product/travel-trailer">Travel Trailers</a></span><span><a href="/product/travel-trailer/new">New</a> | <a href="/product/travel-trailer/used">Used</a></span></span></li>
        <li><a href="/product/fifth-wheel"><img src="//assets-cdn.interactcp.com/demo/images/rv-type-fw.png" alt="" /></a> <span class="rv-types-content"> <span class="rv-types-title"><a href="/product/fifth-wheel">Fifth Wheels</a></span> <span><a href="/product/fifth-wheel/new">New</a> | <a href="/product/fifth-wheel/used">Used</a></span></span></li>
        <li><a href="/product/motor-home"><img src="//assets-cdn.interactcp.com/demo/images/rv-type-mh.png" alt="" /></a> <span class="rv-types-content"> <span class="rv-types-title"><a href="/product/motor-home">Motorhomes</a></span> <span> <a href="/product/motor-home/new">New</a> | <a href="/product/motor-home/used">Used</a></span> </span></li>
        <li><a href="/product/toy-hauler"><img src="//assets-cdn.interactcp.com/demo/images/rv-type-th.png" alt="" /></a> <span class="rv-types-content"><span class="rv-types-title"><a href="/product/toy-hauler">Toy Haulers</a></span><span><a href="/product/toy-hauler/new">New</a> | <a href="/product/toy-hauler/used">Used</a></span></span></li>
    </ul>
</nav>

#rv-types { display: none; padding: 20px 15px; background: #fff; }
.homepage #rv-types { display: block; }
#rv-types ul { list-style-type: none; padding: 0; margin: 0; text-align: center; font-size: 0; }
#rv-types ul li { max-width: 50%; display: inline-block; margin-top: 1px; width: 50%; padding: 5px; vertical-align: top; }
#rv-types ul li a { display: block; padding: 15px 10px; white-space: nowrap; font-size: 14px; color: #000; }
#rv-types ul li a:hover { text-decoration: none; color:#970202; }
#rv-types ul li span.rv-types-content { display: block; border: 1px solid transparent; border-radius: 5px; padding: 10px; }
#rv-types ul li span.rv-types-title a { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; color: #970202; }
#rv-types ul li span a { display: inline-block; font-weight: 400; line-height: 1em; padding: 0 5px; text-transform: uppercase; border-left: 1px solid #000; font-size: 11px; }
#rv-types ul li span a:first-child { border-left: 0; }
#rv-types ul li img { display: block; margin: 0 auto 5px auto; }

    @media (min-width: 768px) {
        #rv-types ul li { width: 20%; }
        #rv-types ul li a { padding: 10px 10px 5px 10px; font-weight: 700; text-transform: uppercase; }
    }