Question

我在网站的顶部做了一些导航。但是，当你将它悬停时，我希望选项彼此相邻，而不是彼此重叠。

我希望有人可以帮助我。

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 50px;
}
ul li {
    position: relative;
}
li ul {
    position: absolute;
    left: 49px;
    top: 0;
    display: none;
}
ul li a {
    display:block;
    text-decoration: none;
    color: #777;
    background:none;
    padding: 5px;
}
/* Fix IE. Hide from IE Mac */
 * html ul li {
    float: left;
}
* html ul li a {
    height: 1%;
}
/* End */
 li:hover ul {
    display:block;
}
li:hover ul, li.over ul {
    display: block;
}
/* Fix IE. Hide from IE Mac */
 * html ul li {
    float: left;
    height: 1%;
}
* html ul li a {
    height: 1%;
}
/* End */
 #uno:hover {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

我没有该网站的链接，因为它尚未在线。如果您需要更多信息，我可以尝试进行一些演示，但我想，可能您会知道我的意思。

Answer 1

您应该尝试替换

display: block;

带

display:inline-block;

Answer 2

在您的CSS中，您在width:50px;标记上设置了ul，这会阻止您的链接并排排列。

同时添加

ul li { display:inline;}

因为元素默认为display:block

http://jsfiddle.net/V3sTd/1/

如何打开<li>彼此相邻？</li>

2 个答案: