Блог

у меня проблема с размещением текста в блоках (выпадающее меню) в CSS.

Код на сербском языке, но при необходимости я могу перевести его на английский.

Хорошо, итак, у меня есть «Понуда услуги», когда я наведу на нее курсор мыши, я получаю выпадающее меню с «Любовью», «Обука паса», «Риболов» и «Обезберегание необходимой документации», но проблема в том, что последнее не помещается и переходит в следующую строку, как показано на скриншоте 1 здесьhttps://ibb.co/YbTytJw (ПРИМЕЧАНИЕ: на скриншоте я навел курсор на «ribolov», вот почему он оранжевый). Я бы хотел, чтобы это было похоже на этот screnshot2 https://ibb.co/dW65Tyx.

Та же проблема при наведении курсора мыши на «Lov» (который открывает новое выпадающее меню с двумя вариантами там), как показано на скриншоте3https://ibb.co/0ZKxVWj (Примечание: Я добавил >>, чтобы указать, что есть другое выпадающее меню, и снова я навел курсор на «lov», поэтому оно оранжевое). Как и в первой проблеме, мне нужно, чтобы в нем было написано «любовь на ситну дивляц», а под «любовь на крупну дивляц», вместо этого написано «любовь на ситну», «любовь на крупну» и под «дивляц». Мне нужно, чтобы это было похоже на скриншот4https://ibb.co/8zspMY0.

 <style>

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


    html{

        height:100%;

    }


    .wrapper{

        min-height:100%;
        width:100%;
        position:relative;
    }

    body{

        height:100%;
        background:#ddd;

    }

    h2{
        padding:50px;
        background-color:#161B21;
        color:#f0f1f5;
        font-family: big john;
        text-align:center;
        font-size:30pt;
        letter-spacing:15px;

    }

    .navigationDesktop{

        background-color:#161B21;

    }

    nav{
        height:40px;
        width:700px;
        display:block;
        margin:0 auto;
        text-align:center;
        text-transform: uppercase;

    }

    nav a{

        display:block;
        text-decoration:none;
        font-family:monospace;
        font-weight:bold;
        font-family:13pt;
        color:white;


    }

    nav a:hover{
        background-color:#F4A950;
        color:#f0f1f5;
    }

    nav ul{

        list-style:none;

    }

    nav ul li{
        float:left;
        width:140px;
        height:40px;
        line-height:40px;
        background-color:#161B21;
        list-style-type: none;

    }

    nav ul ul li{
        position:relative;
        display:none;

    }

    nav ul ul ul{
        display:none;
    }

    nav ul li:hover ul li{
        display:block;
        animation: navmenu 500ms forwards;
    }

    @keyframes navmenu{
        0%{
            opacity:0;
            top:5px;

        }
        100%{
            opacity:1;
            top:0px;

        }
    }

    nav ul ul li:hover ul{
        display:block;
        position:absolute;
        width:140px;
        left:140px;
        top:0px;

    }



</style>
  

Вот вставка HTMLhttps://pastebin.com/MLweR454

И вот вставка CSS https://pastebin.com/mtszKhNu

Это происходит потому, что вы пытаетесь установить размер каждого блока навигационной ссылки с помощью line-height:40px , который создает 40 пикселей пространства между каждой строкой текста. Что вы хотите сделать, это установить для вашего nav a значение line-height:1.1; , без пикселей, и сделать размер блока ссылок основанным на количестве текста и отступов, добавив padding: 15px 0;