html - 如何打开彼此相邻的 ？

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

在您的 CSS 中，您在 ul 标签上设置了一个 width:50px;，这会阻止您的链接并排对齐。

同时添加

ul li { display:inline;}

因为元素默认为display:block

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