为什么增加高度项目在悬停时接触？

Question

为什么在悬停在它上方时增加高度项目联系？如何解决？

这是我的代码：

＆＃13;

＆＃13;

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;
        }

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

请参阅此图片：

Answer 1

当您悬停列表项时 - 您正在通过生成的内容向锚标记添加箭头。

Thant是导致身高增加的原因。

要解决此问题 - 只需在生成的内容上设置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>

Answer 2

因为

#nav > li:hover > a:after {
content: '\25BE';
}

高度（字体大小）是此内容的高点。

也许你应该尝试一下background-img。

或者将它定位为绝对位置和a-tag相对位置。

Answer 3

由于：content属性（#nav > li:hover > a:after）之后您正在添加悬停（小箭头图标）

为避免这种情况，应用line-height: 0是一种有效的方式。

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

  

此外，您还有两次此代码，请确保删除多余代码。

Answer 4

简单的线高问题。

＆＃13;

＆＃13;

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;
            line-height: 20px;
        }

        #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;
        }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;