Question

我在将文本放入CSS的块（下拉菜单）时遇到问题。

该代码使用塞尔维亚语，但是如果需要，我可以将其翻译为英语。

好，所以我有“ Ponuda usluga”，当我将鼠标悬停在上面时，会出现带有“ Lov”，“ Obuka Pasa”，“ Ribolov”和“ Obezbedjivanje potrebne dokumentacije”的下拉菜单，但问题是最后一个不适合并继续进入下一行，如屏幕截图1所示https://ibb.co/YbTytJw（注意：在屏幕截图中，我将鼠标悬停在“ ribolov”上，这就是其橙色的原因）。我希望它像这个screnshot2 https://ibb.co/dW65Tyx。

当我将鼠标悬停在“ Lov”（打开一个新的下拉菜单，其中有2个选项）上时出现相同的问题，如屏幕快照3 https://ibb.co/0ZKxVWj所示（注意：我添加>>来指出还有另一个下拉菜单，再一次，我将鼠标悬停在“ lov”上，这就是为什么它是橙色的。与第一个问题相同，我需要在“ lov na krupnu divljac”下面说“ lov na sitnu divljac”，而在“ divljac”下面说“ lov na sitnu”，“ lov na krupnu”。我需要像截图4 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 https://pastebin.com/MLweR454的粘贴框

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

Answer 1

之所以发生这种情况，是因为您试图通过使用line-height:40px来设置每个导航链接块大小，从而在每行文本之间创建40px的间隔。您想要做的就是将导航设置为line-height:1.1;，不设像素，并通过添加padding: 15px 0;

使链接块的大小基于文本和填充的数量。

如何使下拉菜单中的文本适合文本或设置其格式

1 个答案: