好的,我有一个小菜单栏,菜单中的三个元素有更多的子菜单。但是菜单栏中的元素之间有不必要的间隔,而且我创建的子菜单也有不必要的背景宽度,我在代码中用白色来让读者理解。由于这个不必要的宽度,即使鼠标悬停在不可见的宽度(在本例中是白色的,但在实时代码中它不会是白色的)上,菜单栏上应该出现的悬停效果也会出现。因此,由于它在实时代码中是不可见的,所以访问者可能会困惑为什么子菜单仍然没有被隐藏,即使他们已经将鼠标从子菜单中移开。因此,我想删除元素之间不必要的间距,使它们在菜单栏中对齐,并将子菜单的宽度减少到子菜单中链接的宽度。我知道这可能有点难以解释,所以我张贴这个小提琴链接。DEMO
我不能发布css代码,因为问题中只允许发布30000个字符,所以您可以通过从jsfiddle复制在本地计算机上编译代码。对不起,你费了那么大劲。我也张贴HTML,只是因为它是一个必要的张贴一些代码。
HTML代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="expertystemsHome2.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Expertystems</title>
</head>
<body>
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home"><a href="">AAAAAA</a></li>
<li class="Repair"><a href="">BBBBBB</a>
<ul class="submenu">
<li>
<a href="">b1</a>
</li>
<li>
<a href="">b2</a>
</li>
<li>
<a href="">b3</a>
</li>
<li>
<a href="">b4</a>
</li>
<li>
<a href="">b5</a>
</li>
<li>
<a href="">b6</a>
</li>
<li>
<a href="">b7</a>
</li>
<li>
<a href="">b8</a>
</li>
</ul>
</li>
<li class="Unlock"><a id="tempUnlock" href="">CCCCCC</a>
<ul id="mozillaPain2" class="submenu2">
<li>
<a href="">c1</a>
</li>
<li>
<a href="">c2</a>
</li>
<li>
<a href="">c3</a>
</li>
<li>
<a href="">c4</a>
</li>
</ul>
</li>
<li class="Expertise"><a id="Expertise" href="">DDDDDD</a>
<ul id="mozillaPain3" class="submenu4">
<li>
<a href="">d1</a>
</li>
<li>
<a href="">d2</a>
</li>
<li>
<a href="">d3</a>
</li>
<li>
<a href="">d4</a>
</li>
<li>
<a href="">d5</a>
</li>
<li>
<a href="">d6</a>
</li>
<li>
<a href="">d7</a>
</li>
<li>
<a href="">d8</a>
</li>
<li>
<a href="">d9</a>
</li>
<li>
<a href="">d10</a>
</li>
<li>
<a href=""><img style="width: 158px;height: auto;" src="images/creation.png"></a>
</li>
</ul>
</li>
<li class="Careers"><a href="">EEEEEE</a></li>
<li class="Contact"><a href="">FFFFFF</a></li>
</ul>
</div>
</body>
</html>
最佳答案
你在用一个工具来生成这个代码吗?如果是这样的话,它似乎不起作用。
以下是正在发生的事情的摘要:
如果仔细观察并检查具有所有间距的元素。元素本身具有这些非常大的margin-left:x;
ul.menu .Unlock a {
margin-left: 185px;
....
ul.menu .Expertise a {
margin-left: 277px;
....
如果您手动浏览并删除所有这些边距,您的菜单将开始合并。
但我会仔细看看你可能正在使用的工具,因为那确实是你的问题所在。
Updated Fiddle