html - 如何适合或格式化下拉菜单中 block 中的文本

Question

我在将文本放入 CSS block (下拉菜单)时遇到问题。

代码是塞尔维亚语，但如果需要我可以将其翻译成英文。

好的，所以我有“Ponuda usluga”，当我将鼠标悬停在上面时，我会看到带有“Lov”、“Obuka Pasa”、“Ribolov”和“Obezbedjivanje potrebne dokumentacije”的下拉菜单，但问题是最后一个不适合并继续下一行，如此处的屏幕截图 1 所示 https://ibb.co/YbTytJw (注意:在屏幕截图中，我将鼠标悬停在“ribolov”上，这就是为什么它是橙色的)。我希望它像这样 screenshot2 https://ibb.co/dW65Tyx .

同样的问题，当我将鼠标悬停在“Lov”(打开一个新的下拉菜单，那里有 2 个选项)时，如屏幕截图 3 所示 https://ibb.co/0ZKxVWj (注意:我添加了 >> 以指出还有另一个下拉菜单，我再次将鼠标悬停在“lov”上，这就是为什么它是橙色的)。与第一个问题相同，我需要它说“lov na sitnu divljac”并在“lov na krupnu divljac”下方，而是在“lov na sitnu”、“lov na krupnu”和“divljac”下方显示。我需要它像 screenshot4 https://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>

这是 HTML 的 pastebin https://pastebin.com/MLweR454

这是 CSS 的 pastebin https://pastebin.com/mtszKhNu

Answer 1

发生这种情况是因为您试图通过使用 line-height:40px 来设置每个导航链接 block 的大小，这会在每行文本之间创建 40px 的空间。您想要做的是将导航设置为 line-height:1.1;，没有 px，并通过添加 使链接 block 的大小基于文本和填充的数量>内边距:15px 0;