Html 响应导航菜单不工作

我正试图设计一个反应灵敏的导航条。我对css3了解不多。除了平板电脑，导航条工作正常。请告诉我平板电脑尺寸缺少什么。是否需要添加平板电脑大小的媒体查询？或者需要在导航标签中进行任何更改

<nav class="clearfix">
    <ul class="clearfix">
         <li><a href="#">Home</a></li>
         <li><a href="#">Menu1</a></li>
         <li><a href="#">Menu1</a></li>
         <li><a href="#">Menu1</a></li>
         <li><a href="#">Menu1</a></li>
         <li><a href="#">Menu1</a></li> 
         <li><a href="#">Menu1</a></li> 
         <li><a href="#">Menu1</a></li> 
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>

你可以试试这个：

我添加了一个新的媒体查询，最高可达1000px。它将在屏幕宽度上均匀分布菜单项。此解决方案基于您有8个菜单项

/*Styles for screen 1000px and lower*/
@media screen and (max-width: 1000px) {
    nav ul {
        width: 100%;
    }

    nav li {
        width: 12.5%;
    }

    nav a {
        width: 100%;
    }
}

---

你不工作是什么意思？它对我有用？当你说“不工作”时，你是指菜单分成两行，低于1000px的宽度吗？是的，菜单分成两行。如何使其根据屏幕大小正确对齐@Mathias谢谢@Mathias它起作用了。所以根据屏幕大小，我们给出了它们的百分比值。根据它适应的大小。

/*Styles for screen 1000px and lower*/
@media screen and (max-width: 1000px) {
    nav ul {
        width: 100%;
    }

    nav li {
        width: 12.5%;
    }

    nav a {
        width: 100%;
    }
}