Как сделать подменю в столбик?

Question

[Vova135798]

Я вывожу меню в строчку, но свойство inline применилось и для подменю. Как отменить это свойство для подменю?

<header>
        <div class="logo">
            <h1>Uniqlo</h1>
        </div>
        <ul class="first_menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Man</a>
                <ul class=sub-menu>
                    <li>подпунтк21</li>
                    <li>подпункт 2</li>
                    <li>третий подпункт</li>
                </ul>
            </li>
            <li><a href="#">Woman</a></li>
            <li><a href="#">Sale</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
        <ul class="second_menu">
            <li><img src="static/search.svg" width="20px" alt="cart"></li>
            <li><img src="static/heart.svg" width="20px" alt="wishlist"></li>
            <li><img src="static/cart2.svg" height="23px" alt="search"></li>
        </ul>
    </header>

body{
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
header{
    display: flex;
    align-items:center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    vertical-align: middle;
}
.logo{
    margin-left: 50px;
}
.second_menu{
margin-right: 50px;
}
header ul li{
    display: inline;
    vertical-align: middle;
    font-size: 18px;
    padding: 0 30px 0 0 ;
}
header a{
    text-decoration: none;
    color: #000;
}
header a:hover{
    color: #F34723;
}

li .sub-menu{
    display: block;
    position: absolute;
    

}

Comments

[Антон Литвиненко]

header > ul > li

[Ankhena]

Как отменить это свойство для подменю?

Не нужно отменять.
Применяйте к нужным элементам.

Либо используйте максимально краткие из возможных дочерние и контекстные селекторы, в данном случае это .first_menu > li.
Либо задайте для этих li классы и обращайтесь по ним.

Вот так header ul li делать не стоит, ведь у вас есть класс у ul. Совершенно незачем во-первых, увеличивать вложенность селекторов и, во-вторых, обращаться по тегам.

А ещё лучше:

Я вывожу меню в строчку, но свойство inline применилось и для подменю.

Сейчас в ходу флексы и гриды.
Изучите и вам понравится.
Заодно и проблема с переопределением li в данном случае уйдет.

Answer 1

[Алексей]

ul {
    position: absolute;
    display: block;
}
ul.sub-menu li{
    display: block;
}