0

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

У меня есть в общем то меню сайта на 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"> ввидет себя странно. Не понимаю почему!

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

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

4
  • такой результат нужен ? 17 мар 2021 в 12:44
  • @MaximLensky, оу, да, именно такой. Только вот верхняя менюшка должна быть немного потолще. Пойду сейчас разбираться как это вы так сделали.
    – Komend
    17 мар 2021 в 12:49
  • если потолще то в calc прибавите 100% + 10px или сколько то 17 мар 2021 в 12:51
  • Хорошо, спасибо большое. Буду пользоваться. Так быстро помогли, даже не знаю что сказать... Спасибо большое еще раз!
    – Komend
    17 мар 2021 в 12:52

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.