下拉导航栏的问题

我的导航栏有问题。制作一个的过程已经完成,但是当我将鼠标悬停在导航上并且出现子导航时,整个文本就会向下移动。我该如何解决?已经感谢您阅读本文。

希望你拥有美好的一天

西里尔

HTML:

<nav id="mainnav">
            <ul class="horizontal">
                <li><a href="#">Home</a></li>
                <li><a href="">Planning</a></li>
                <li><a href="">Takken</a>
                    <ul>
                        <li><a href="">Kapoenen</a></li>
                        <li><a href="">Kawellen</a></li>
                        <li><a href="">Kajoo's</a></li>
                        <li><a href="">Jojoo's</a></li>
                        <li><a href="">Givers</a></li>
                        <li><a href="">Jin</a></li>
                        <li><a href="">Akabe</a></li>
                    </ul>
                </li>
                <li><a href="" title="">Kleding</a></li>
                <li><a href="" title="">Contact</a>
                    <ul>
                        <li><a href="">Leiding</a></li>
                        <li><a href="">Verhuur</a></li>
                    </ul>
                </li>
                <li><a href="" title="">Inschrijven</a></li>
            </ul>
        </nav>

CSS:

.horizontal {
    list-style-type: none;
    margin: 40 auto;
    width: 640px;
    padding: 0;
    overflow: hidden;
}

.horizontal > li {
    float: left;
}

.horizontal li ul{
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;

}

.horizontal li:hover ul {
    display: block;
}

.horizontal li a{
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 22px 10px;
    font-family: arial;
    font-size: 8pt;
    font-weight: bold;
    color:#FFFFFF;
    text-transform: uppercase;
    border-right: 1px solid #607987;
    background-color: #006600;
    letter-spacing: .08em;
}

.horizontal li a:hover {
    background-color: darkorange; 
    color:#a2becf
}

.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }

我不能发布此内容,因为我的帖子主要是代码,因此我将其放在此处作为填充物,以便我可以发布。不好意思哈哈。

评论
  • Stanf
    Stanf 回复

    尝试为li元素提供固定的宽度。

    例如:

    .horizontal > li {
        float: left;
        width: 6rem;
    }