Zawijanie się border'a po najechaniu

Question

Cześć. Napotkał mnie pewnie problem podczas tworzenia strony:

Otóż tworzę stronę, zrobiłem menu dodałem bordery dla lepszego wyglądu i przy pomocy funkcji hover chciałem zrobić coś takiego jak powyżej. Jak widać zawija się tylko jeden border jeśli na coś najadę (ten po prawej).
Chciałbym aby "zawijały się" obydwa i stąd moje pytanie. Jak to zrobić? 
Z góry dzięki każdemu za pomoc.

ol > li:hover {
    background-color: #add6ff;
    -webkit-transition-duration: 0.6s;
    border-radius: 10px;
}

 

Answer 1

Czy możesz wkleić cały kod tego menu?

Comments

ol {
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 58px;
    line-height: 200%;
    display: inline-block;
}

ol a {
    color: black;
    text-decoration: none;
}

ol > li {
    float: left;
    width: 200px;
    height: 48px;
    border-right: 1px solid black;
    line-height: 250%;
    margin-top: 6px;
}

ol > li:hover {
    background-color: #add6ff;
    -webkit-transition-duration: 0.6s;
    border-radius: 10px;
}

ol > li:last-child {
    border-right: 1px solid white;
}

<div class="rectangle">
        <div id="logo">tekst</div>
        <div id="podlogo">tekst</div>
        <div class="nav">
            <ol>
                <li><a href="#">STRONA GŁÓWNA</a></li>
                <li><a href="#">USŁUGI</a></li>
                <li><a href="#">KONTAKT</li>
                <li><a href="#">GALERIA</a></li>
            </ol>
        </div>
    </div>

 

---

Zawija się tylko jedna strona, ponieważ każdy element ma ustawiony border tylko na jedną stronę (border-right).

Tutaj jest, jak zrobić takie menu w CSS: https://codepen.io/devilishalchemist/pen/eYOQwZx

---

Super, dzięki za pomoc.