为什么我的<ul>会出现这样的情况？ （WordPress的）

Question

我正在尝试用Wordpress制作我的网站。 我想添加我的自定义水平菜单，使用简单的CSS和HTML，因为插件无法满足我。 这是我的HTML代码：

        <div id="provamenutop">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>

这是我的CSS：

        #provamenutop {background-color:#333; width:90%; line-height:100%;}
        #provamenutop li {position: relative; float:left; list-style: none; font-family:verdana;}
        #provamenutop li a {display:inline-block; text-decoration:none; padding: 20px; color: white; background: #333; transition:.4s;}
        #provamenutop li a:hover {background: #111;}

在我的本地计算机上，这看起来是正确的： https://gyazo.com/d5b38f6cc1c7857dbe37945e2d8b5002

但是这是我网站上的样子，使用名为Sportexx的自定义主题： https://gyazo.com/5ccb7e944b627244a7d3ac8344471b28

我知道这可能是主题中已经存在的干扰我的一些CSS，但我能做些什么来避免这个问题呢？ （一个Home按钮和另一个Home按钮之间的空间也是可点击的）

感谢您的阅读。

Answer 1

当您使用Chrome Developer Tools或Firefox Firebug并检查HTML时，您会在网站上看到以下菜单输出http://www.ferrari.co.it/athletic/

<div id="provamenutop">
<ul>
  <li><a href="#">Home</a></li><a href="#">
  </a><li><a href="#"></a><a href="#">Home</a></li><a href="#">
  </a><li><a href="#"></a><a href="#">Home</a></li><a href="#">
  </a><li><a href="#"></a><a href="#">Home</a></li><a href="#">
  </a><li><a href="#"></a><a href="#">Home</a></li><a href="#">
</a></ul><a href="#">
</a>
</div>

所以这里的问题不是CSS，而是错误的HTML。您还有两个<a href...></a>标记。一个在Home之前，<一个在之外}关闭，另一个在之外关闭</li>标记。

如果您修复了HTML，那么它看起来像这样，它实际上会起作用：

</ul>

Answer 2

这绝对是一个CSS冲突的问题。你有链接所以我们可以用firebug检查吗？应该是一个非常容易的修复。当我在JSFiddle中运行你的html和css时它运行正常。

  

我不确定你的意思在我的本地电脑上，这看起来是正确的：   但这是我的网站上使用自定义主题的样子   叫做Sportexx：

您是否在本地计算机上使用sportexx？如果它没有主题而没有使用主题，那就是CSS。只需在浏览器中打开firebug，然后查看菜单周围的css。您应该能够在那里进行调整并解决问题。然后转到样式表并相应地进行更改。

看到你的评论后。这是HTML。只需删除其他链接即可。