Question

查看此处：http://174.132.101.73/~ree/header/

我有一个下拉框。当您将鼠标悬停在产品链接上时，我正在尝试将“链接1”，“链接2”和“链接3”文本对齐到产品链接下方。但我无法让这为我的生活而努力。我确信这很简单。您将在CSS文件的底部找到有问题的CSS代码。这是我认为问题发生的片段。

/* General */
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }

/* Head links */
#cssdropdown li.headlink { width:60px; float: left; text-align: center; }

/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border: 1px black solid; text-align: left; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 5px; }
#cssdropdown li.headlink ul li a:hover { background-color: #333; }

我也试图在链接（“链接1”，“链接2”和“链接3”）下方自动将盒子放在产品链接下面，而不是像现在这样略微向右。 / p>

任何帮助表示赞赏，因为这让我很生气！

全部谢谢

Answer 1

更改

#header UL {margin: 0 0 0 30px}

到

#header > UL {margin: 0 0 0 30px}

问题是你正在为#header内的所有UL添加30px的左边距，而你可能只需要直接的孩子。也许与#header LI相同。

Answer 2

更改

#header ul {
float:left;
left:auto;
margin:0 0 0 10px;
padding:0;
z-index:99;
}

到

#header ul {
float:left;
left:auto;
margin:0;
padding:0;
z-index:99;
}

利润空间正在搞乱。

Answer 3

对齐产品词语

尝试添加以下样式：

li.headlink ul li 
{
    margin-left:0px !important;
}

Answer 4

你根本使用的是Firefox吗？有一个非常有用的插件工具栏，名为Web Developer，可以帮助解决CSS问题（以及许多其他问题）。

在这些规则中，链接1 - 链接3 LI元素总共添加了30px的左边距：

#cssdropdown li.headlink {
   width: 60px;
   float: left;
   margin-top: 30px;
   margin-right: 15px;
   margin-bottom: 0px;
   margin-left: 15px;
}

和

#header li {
   list-style-image: none;
   display: inline;
   float: left;
   margin-top: 30px;
   margin-right: 15px;
   margin-bottom: 0pt;
   margin-left: 15px;
}

调整CSS下拉的恼人问题

4 个答案: