[HTML & CSS] Menu 2 poziomowe rozwala się

Question

Dobry, 

mam proste menu zagnieżdżone (2 poziomy). Ustawiłem sobie 1 poziom menu,a le jak najadę na 2 to poszerza mi się (ponieważ niewidoczny normalnie text jest dłuższy) . Jak zrobić aby pojawiało się pod menu bez rozszerzania głównej kategorii?

html 

<!-- Nav -->
    <nav class="menu">
        <div class="logo"><img src="img\logo.png" alt=""></div>

        <div class="div_menu">
            <ol class="ol_menu">
                <li class="li_category"><a class="a_category ofrerta" href="#"><i class="fas fa-caret-down"></i>&nbsp;&nbsp;Oferta
                    </a>
                    <ul class="ul_submenu">
                        <li class="li_submenu"><a class="a_submenu" href="#">Internet</a></li>
                        <li class="li_submenu"><a class="a_submenu" href="#">Telewizja</a></li>
                        <li class="li_submenu"><a class="a_submenu" href="#">Telefon</a></li>
                    </ul>
                </li>

                <li class="li_category"><a class="a_category" href="#">Biznes</a>
                </li>

                <li class="li_category"><a class="a_category" href="#"><i class="fas fa-caret-down"></i>&nbsp;&nbsp;Informacje
                    </a>
                    <ul class="ul_submenu">
                        <li class="li_submenu"><a class="a_submenu" href="#">Aktualności</a></li>
                        <li class="li_submenu"><a class="a_submenu" href="#">Projekty unijne</a></li>
                        <li class="li_submenu"><a class="a_submenu" href="#">RODO</a></li>
                        <li class="li_submenu"><a class="a_submenu" href="#">Ciasteczka</a></li>
                    </ul>
                </li>

                <li class="li_category"><a class="a_category" href="#">Dla inwestorów</a></li>

                <li class="li_category"><a class="a_category" href="#"><i class="fas fa-caret-down"></i>
                        &nbsp;&nbsp;Pomoc </a>
                    <ul class="ul_submenu">
                        <li class="li_submenu"><a class="a_submenu" href="#">Ogólna</a></li>
                        <li class="li_submenu"><a class="a_submenu" href="#">Techniczna</a></li>
                    </ul>
                </li>
                <li class="li_category"><a class="a_category" href="#">Kontakt</a>

                </li>
            </ol>
        </div>
    </nav>

css 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    background-image: url("../img/computer-820281.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.9;
}

nav.menu {
    display: flex;
    height: 62px;
    width: 90vw;
    background-color: rgb(221, 218, 218);
    top: 10px;
    left: calc(10);
    position: fixed;
    max-width: 1400px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #000;
}

div.logo img {
    height: 40px;
    margin: 10px;
}

div.menu {
    margin-right: 0;
}

ol.ol_menu {
    list-style-type: none;
    display: flex;
    position: absolute;
    right: 0;
    flex-grow: 0;
}

li.li_category {
   list-style-type: none;
   width: auto;
}

ul.ul_submenu {
   list-style-type: none;
   display: none;
   border-left: 1px solid  rgb(65, 64, 64);
   border-right: 1px solid  rgb(65, 64, 64);
   border-bottom: 1px solid  rgb(65, 64, 64);
}


li.li_category:hover > ul.ul_submenu {
    display: block;
}

li.li_submenu {
    background-color: rgb(221, 218, 218);
    text-align: center;
}

a.a_category  {
    display: flex;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(65, 64, 64);
    padding: 5px 10px;
    font-weight: 700;
    font-size: 15px;
    line-height: 50px;
    transition: .5s;
    text-align: center;
}

a:hover {
    color: #32bdd7;
    background-color: azure;
    width: 100%;
    opacity: 1;
}

a.a_submenu{
    line-height: 18px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(65, 64, 64);
    font-weight: 700;
    font-size: 15px;
    transition: .5s;
    text-align: left;
}

section.main {
    position: relative;
    top: 100px;
}

.fas {
    line-height: 50px;
}

Answer 1

li > ul{
  position: absolute;
}

Tylko to nie jest okej rozwiązanie. Style masz określone dosć uniwersalnie, a należy pamiętać że stylizujemy tak, aby nie wpływać na resztę strony. Umieść odpowiednie klasy i wszystko będzie śmigać,

Comments

Już kilka godzin siedziałem nad tym projektem. Zaklasowałem każdy element. Edytuje je i nie ma pożądanego efektu. Nie mam najmniejszego pojęcia co zrobić aby po tym jak wysunie się nowe pod menu szerokość tego podstawowego nie rosła.

Zrobiłem aktualizację kodu w 1 poście.

---

https://codepen.io/anon/pen/MzReao

Zobacz, dodałem ostatnią linijkę i działa to nadal. Musi coś być nie tak z tym jak używasz klas.

---

@radek024, O boże faktycznie... Nie wiem co gorsze: ze teraz po małej ilości kodu działa czy to że to obrzydliwie wygląda XD

 

Dziękuje Ci bardzo!

Answer 2

Zmieniłem odrobinę kod z pierwszego potsa. Dodałem klasy jednak nie mogę osiągnąć pożądanego efektu.