如何在 CSS 驱动的菜单下拉菜单中控制子链接之间的间距？答案

【问题标题】：How do I control the spacing between my child links in my CSS driven menu dropdown?如何在 CSS 驱动的菜单下拉菜单中控制子链接之间的间距？
【发布时间】：2013-07-23 08:02:08
【问题描述】：

这个discussion 已经很好地帮助我设置了导航栏。但是现在，我的子链接之间有很大的空间，并且不与父链接对齐。

我的网站可以看到here

关于如何将我的子链接（洛杉矶、圣地亚哥檀香山等）与父链接（位置）对齐有什么想法吗？另外，如何减少子链接（洛杉矶、圣地亚哥、檀香山...）之间的空间？

这是我的 CSS 供您快速参考。

#mainNav {
/*font-size: 1.0em;    doesn't seem to do anything*/
/*height: 20px;      doesn't seem to do anything*/
margin-top: -10px;
position: absolute;
right: 5%;
top: 40%;
}
/*-------------------------------*/
/*----------Below is CSS for List of Parent Links---------------------*/
#mainNav ul {                               
list-style-type: none;
position: relative;
display: inline-table;
}
/*----------Below is CSS for List of Location Links---------------------*/
#mainNav ul ul{
list-style: none;
display: none;
}
/*----------Below is CSS for List of Location---------------------*/
#mainNav ul li {float: left;
text-decoration: none;
margin: 0 0 0 25px;
padding-top: 0;
float: left;
width: auto;
list-style: none outside none;
font-size: 0.90em;
text-transform: uppercase;}

#mainNav ul li a {display: block; text-decoration: none;}

#mainNav ul ul {
display: none; /*if this is block, it causes all the sub links to show at once!*/
position: absolute;
width: auto;
top: 35%;
}

#mainNav ul li:hover > ul { display: block;}
#mainNav ul ul li {width: 100%;}

#mainNav li li {
float: none;
width: auto;
}

【问题讨论】：

标签： html css drop-down-menu hover spacing

【解决方案1】：

你可以试试这个css

#mainNav ul ul {
display: none;
position: absolute;
width: auto;
top: 13px;
left: 0;
margin: 0;
padding: 0;
line-height: normal;
}
#mainNav ul ul li {
width: 100%;
margin: 0;
padding: 0;
background: red;
margin-top: 2px;
}


#mainNav ul li{}

#mainNav ul li > ul > li a {
height: auto;
line-height: 21px;
margin: 0;
padding: 0;
text-align: left;
}

结果图片

【讨论】：

你确定你复制了正确的 CSS 吗？另外，您能否简要强调一下您所做的更改？ Screenshot

【解决方案2】：

这段代码最终为我完成了。我认为你复制和粘贴了错误的 Rohit！

li{
list-style: none;
display: inline-block;
/*width: 150px;*/
max-width: auto;
}

ul li a{
text-decoration: none;
display: block;
text-align: center;

padding: 10px; /*needed for spacing between LOCATIONS and LOS ANGELES*/
}

ul li ul li a{
padding-top: 5px;
margin-top: 5px;
float: left;
font-weight:bold;
}

ul ul{
position: absolute;
visibility: hidden;
}

#mainNav ul li:hover ul{
visibility: visible;
padding: 0;
}

ul li ul li{
display: block;
}

点击这里查看latest。

【讨论】：