css - 为什么将鼠标悬停在它上面时会增加高度元素联系人？

Question

为什么将鼠标悬停在 Contact 元素上会增加高度？怎么解决？

这是我的代码:

ul {
            padding: 0;
        }

        #nav ul {
            display: none;
        }
        #nav li:hover > ul {
            display: block;
        }
        
        #nav > li {
            float: left;
        }
        
        #nav li {
            list-style: none;
            width: 150px;
            position: relative;
            border: 1px solid red;
            box-sizing: border-box;
            
        }
        
       
        #nav a {
            display: block;
            background-color: #000;
            color: red;
            text-decoration: none;
            padding: 10px 20px;
            text-align: center;
            box-sizing: border-box;
            border: 2px solid transparent;

        }

        #nav ul ul {
            position: absolute;
            left: 150px;
            top: 0;
        }
        #nav li:hover > a {

            color: orange;
        }
        
        #nav li:hover > a:after {
            content:'\25B6';
            color: red;
            margin-left: 5px;
            padding: 0;
        }
        #nav > li:hover > a:after {
            content: '\25BE';
            color: red;
            margin-left: 5px;
            padding: 0;
        }

 <div id="wrapper">  
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a>
                    <ul>
                        <li><a href="#">Model 1</a></li>
                        <li><a href="#">Model 2</a></li>
                        <li><a href="#">Model 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Product 3</a></li>
            </ul>
        </li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Service 1</a></li>
                <li><a href="#">Service 2</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

查看此图片:

Answer 1

当您将鼠标悬停在列表项上时 - 您将通过生成的内容向 anchor 标记添加一个箭头。

这就是导致高度增加的原因。

要解决此问题 - 只需在生成的内容上设置 position:absolute。

ul {
            padding: 0;
        }

        #nav ul {
            display: none;
        }
        #nav li:hover > ul {
            display: block;
        }
        
        #nav > li {
            float: left;
        }
        
        #nav li {
            list-style: none;
            width: 150px;
            position: relative;
            border: 1px solid red;
            box-sizing: border-box;
            
        }
        
       
        #nav a {
            display: block;
            background-color: #000;
            color: red;
            text-decoration: none;
            padding: 10px 20px;
            text-align: center;
            box-sizing: border-box;
            border: 2px solid transparent;

        }

        #nav ul ul {
            position: absolute;
            left: 150px;
            top: 0;
        }
        #nav li:hover > a {

            color: orange;
        }
        
        #nav li:hover > a:after {
            content:'\25B6';
            color: red;
            margin-left: 5px;
            padding: 0;
            position:absolute;
        }
        #nav > li:hover > a:after {
            content: '\25BE';
            color: red;
            margin-left: 5px;
            padding: 0;
        }

<div id="wrapper">  
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a>
                    <ul>
                        <li><a href="#">Model 1</a></li>
                        <li><a href="#">Model 2</a></li>
                        <li><a href="#">Model 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Product 3</a></li>
            </ul>
        </li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Service 1</a></li>
                <li><a href="#">Service 2</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>