Html 我的导航ul li在首次加载时垂直显示，而不是水平显示

在我的页面顶部有一个导航，其中一些项目水平排列。当我第一次进入页面时，它不是水平排列，而是垂直排列。当我重新加载页面时，一切又恢复正常

这是我的导航：

<nav id="menu"> <i class="fa fa-bars" aria-hidden="true"></i>
    <ul>
        <a href="#home">
            <li>Home</li>
        </a>
        <a href="#services">
            <li>Services</li>
        </a>
        <a href="#work">
            <li>Work</li>
        </a>
        <a href="#contact">
            <li>Contact</li>
        </a>
    </ul>
</nav>

header nav ul li {
    margin-left: 25px;
    float: left;
}

header nav ul li:hover {
    padding-top: 3px;
}

header nav ul li {
    margin-left: 25px;
    display: inline-block;
}

HTML:

<nav id="menu"> <i class="fa fa-bars" aria-hidden="true"></i>
    <ul>
        <a href="#home">
            <li>Home</li>
        </a>
        <a href="#services">
            <li>Services</li>
        </a>
        <a href="#work">
            <li>Work</li>
        </a>
        <a href="#contact">
            <li>Contact</li>
        </a>
    </ul>
</nav>

header nav ul li {
    margin-left: 25px;
    float: left;
}

header nav ul li:hover {
    padding-top: 3px;
}

header nav ul li {
    margin-left: 25px;
    display: inline-block;
}

我已经试过了：

<nav id="menu"> <i class="fa fa-bars" aria-hidden="true"></i>
    <ul>
        <a href="#home">
            <li>Home</li>
        </a>
        <a href="#services">
            <li>Services</li>
        </a>
        <a href="#work">
            <li>Work</li>
        </a>
        <a href="#contact">
            <li>Contact</li>
        </a>
    </ul>
</nav>

header nav ul li {
    margin-left: 25px;
    float: left;
}

header nav ul li:hover {
    padding-top: 3px;
}

header nav ul li {
    margin-left: 25px;
    display: inline-block;
}

…这很好，但当我悬停时，所有项目都会下降，而不仅仅是我悬停的项目

很难解释我的问题，但您在访问页面时可能会得到同样的回答：

<nav id="menu"> <i class="fa fa-bars" aria-hidden="true"></i>
    <ul>
        <a href="#home">
            <li>Home</li>
        </a>
        <a href="#services">
            <li>Services</li>
        </a>
        <a href="#work">
            <li>Work</li>
        </a>
        <a href="#contact">
            <li>Contact</li>
        </a>
    </ul>
</nav>

header nav ul li {
    margin-left: 25px;
    float: left;
}

header nav ul li:hover {
    padding-top: 3px;
}

header nav ul li {
    margin-left: 25px;
    display: inline-block;
}

我使用谷歌浏览器

当你有进一步的问题时，就问吧

---

谢谢

请尝试一下此HTML代码

<nav id="menu">
                <i class="fa fa-bars" aria-hidden="true"></i>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#work">Work</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>

尝试使用此代码。它会帮助你的

收割台导航ul li{
左边距：25px；
浮动：左；
}
标题导航李{
显示：内联块；
}
标题导航ul li：悬停{
垫面：3件；
}

请尝试在列表（li）标记中使用锚定标记

您的代码无效：列表的子项是列表项，而不是链接使用ul标记中的li标记表示每个元素，

标记写为

，列表项插入开始标记和结束标记之间。元素必须放在标记或

标记中，以提供这些元素中的每个列表项。可能值得一提的是您更改了什么（使
标记成为
标记的直接子级）以及为什么这很重要这很重要，因为这是列表的简单形式。如果你不遵循这个结构，它可能会在任何浏览器中中断。谢谢，这很好，我还将a标记放在li标记内，如前所述