这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;
}
最佳答案
你可以试试这个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;
}
结果图片
关于html - 如何控制 CSS 驱动菜单下拉列表中子链接之间的间距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17804592/