Menu poziome CSS, tragedia listy rozwijanej.. :D

Question

Witam, ostatnio na lekcjach tworzymy poziome i pionowe listy rozwijane w CSS. Pisząc takowe na lekcji, wszystko wydawało się być okej. Jako, że zrozumiałem temat dość dobrze postanowiłem swoją szkolną stronkę stworzyć od nowa, w pełni wystylizowaną, opartą na divach. (poprzednia była robiona na framesetach). Nauczycielka podała nam przykładowy kod prostego menu do zeszytu, jak wspomniałem wcześniej, wszystko działało jak powinno. W pewnym momencie po sprawdzeniu jaki efekt przyniósł napisany kod, zobaczyłem tą przerwę między punktami listy (screen poniżej). Jeżeli znalazłby się ktoś, kto mógłby pomóc, powiedzieć jak się jej pozbyć, byłbym bardzo wdzięczny. Od razu też mówię - wiem że Pan Mirosław ma na kanale kurs CSS, w którym robi podobne menu, jednak to robiłem praktycznie sam, z tego co wyniosłem z lekcji. Z góry dziękuję! :>
HTML:https://pastebin.com/nW18a6Dk
CSS:https://pastebin.com/GjGyXqMy

Answer 1

Pierwsza sprawa, nie pisz w ten sposób CSS-a, jest bardzo nieczytelny. (W tym wypadku można użyć CSS beautify - i po sprawie)

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: lightyellow;
}
.wrapper {
    width: 100%;
    min-height: 100%;
}
.content {
    width: 100%;
    position: relative;
    top: 60px;
    min-height: 884px;
}
.menu {
    width: 100%;
    position: fixed;
    height: 50px;
    border-bottom: 2px solid black;
    box-shadow: 0 3px 20px black;
    z-index: 1;
    background-color: lightyellow;
}
.tresc {
    width: 100%;
    min-height: 814px;
    position: relative;
}
.socialbars {
    height: 50px;
    width: 100%;
    position: relative;
}
.footer {
    height: 20px;
    color: #555555;
}
.ein {
    list-style-type: none;
    display: block;
    text-align: center;
}
.ein > li {
    display: inline-block;
}
.ein > li > a,
a:link,
a:visited {
    display: block;
    height: 35px;
    width: 250px;
    padding-top: 15px;
    text-decoration: none;
    color: black;
}
.ein a:active {
    color: white;
    background-color: maroon;
}
.ein li > a:hover {
    background-color: maroon;
    transition-duration: 0.5s;
    color: white;
    cursor: pointer;
}
.ein li > ul {
    display: none;
    list-style-type: none;
    position: absolute;
}
.ein li:hover > ul {
    display: block;
    box-shadow: 0 0 10px black;
}
.ein li ul {
    color: black;
    background-color: lightyellow;
}
.ein > li > ul > li > ul {
    position: relative;
    left: 250px;
    bottom: 50px;
    display: none;
}
.ein > li:hover > ul > li:hover > ul {
    display: block;
}
h1 {
    padding-top: 10px;
    text-align: center;
    animation-name: animtio;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes animtio {
    0% {
        color: blue;
    }
    25% {
        color: green;
    }
    50% {
        color: lime;
    }
    75% {
        color: orange;
    }
    100% {
        color: red;
    }
}

Wszystko co musisz zrobić, to ustawić na ostatni poziom zagnieżdżenia position: absolute. (Zapewne przyda się jeszcze top: 0. Nie zapomnij usunąć bottom: 50px) Aby pozycjonowanie działało względem rodzica, a nie całej listy, rodzicowi ustaw position relative.

Comments

Dziękuję bardzo!! :D Wiem, że taki zapis jest dla wielu mało czytelny, ale właśnie dla mnie jest lepszy.

---

Nic nie jest czytelne, jeśli pojawia się poziomy pasek przewijania, albo kod programu jest zawijany. Każdy edytor tekstu ma przy około 80-tym znaku pionową kreskę, która informuje, że należy przejść do następnej linii. CSS to informacje typu klucz:wartość - widziałeś kiedyś na przykład cennik w jednej linijce? Ustawienie tego w formie listy jest wręcz naturalne. Imo im szybciej się przestawisz tym lepiej - nikt z kim będziesz pracował nie będzie tolerował takiego spagetti.