Не двигается li в css, html

Question

Не как не могу решить проблему. Я делаю меню сайта. Код наверное для квалифицированных людей в этом деле смешной, но для меня это проблема!

У меня есть в общем то меню сайта на html:

/* Цвет для заднего фона #2b2b2b*/
/* Цвет для панели #1b1b1b*/
body{
    margin: 0;
    padding: 0;
    background-color: #1E1F25;
}
.menu-panel{
    display: flex;
    background: #17181c;
    height: 70px; 
    margin: auto;
    text-align: center;
    box-shadow: 0px 1px 5px;
    list-style: none;
}
.menu-panel li {
    cursor: pointer;
    margin: auto 0;
    list-style: none;
}
.menu-panel li a{
    text-decoration: none;
    color: #cfcfcf;
    font-size: 13px;
    font-family: Helvetica,Arial,sans-serif;
    padding: 0.5rem 1.6rem;
    margin: 10px 5px;
    transition: color 0.5s ease;
}
.menu-panel li a:hover{
    color: #FFF;
}

.img-log{
    width: 153px;
    height: 33px;
    margin: auto 0;
    float: left;
    margin-left: 200px;
}
.options-panel{
    margin: auto 0;
}
.submenu-customer{
    position: absolute;
    background-color: #17181c;
    top: 70px;
    display: block;
    box-shadow: 0px 4px 5px;
    text-align: center;
    
}
.submenu-customer li{
    padding: 10px 0px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/display.css">
    <title>Изучаем HTML и CSS</title>
</head>
<body>
    <ul class="menu-panel">
        <img class="img-log" src="icon-menu/buypopversion1000.png" alt="buyPop">
        <li class="content-menu"><a href="#">Покупателям◢</a>
            <ul class="submenu-customer">
                <li><a href="#">Правила</a></li>
                <li><a href="#">Оплата</a></li>
            </ul></li>
        <li><a href="#">Продавцам◢</a></li>
        <li><a href="#">Партнерам◢</a></li>
        <li><a href="#">О нас</a></li>
        <li class="info-n1"><a href="#">Профиль◢</a></li>
        <li class="info-n2"><a href="#">Язык◢</a></li>
    <ul>

</nav>
</body>
</html>

Код вы увидели. Проблема состоит в том что <ul class="submenu-customer"> ввидет себя странно. Не понимаю почему!

Я не могу установить позицию теста, хотел его отображать слева.
Я не могу нормально сделать позицию ul class="submenu-customer" т.е я хотел ровно сделать этот блок снизу от текста Покупателям. Но padding не работает. Он попросту передвигает текст покупатели на вверх.

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

БЛОГ НА HUSL

Не двигается li в css, html

Ответы (0 шт):