Question

我正在尝试创建一个完整的css / html导航栏，我已经克服了我的最后一个问题，但遇到了一个新问题。

当我尝试制作水平导航栏时，主导航li现在也会显示在彼此之下。

此外，我认为文本一直向左看都不顺利，我很确定必须有一些简单的解决方法。

<div class="navbar unselectable" unselectable=on>
    <ul>
        <li><a href="3d.html">Standard</a>
            <ul>
                <li><a href="#">Standard</a>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellentesque mattis porta purus, at aliquet tortor rhoncus sed. Nullam nec lectus lacinia, convallis ex vel, lobortis erat. Cras mi quam, viverra a egestas vel, consequat sit amet felis. Proin rhoncus neque turpis, vel venenatis libero interdum ac.</li>
                    </ul>
                </li>
                <li><a href="#">Standard</a>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum.</li>
                    </ul>
                </li>
                <li><a href="#">Standard</a>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="3d.html">Standard</a></li>
    </ul>
</div>

这就是HTML，我认为这里没有任何错误。

.navbar {
width: 100%;
height: 4.5em;
font-weight: 300; 
position: absolute;
background-color: rgba(0,0,0,0.3);
margin-top: 1em;
z-index: 1;
}

.navbar ul {
position: relative;
display: inline-block;
list-style: none;
left: 30px;
top: 15px;
font-size: 210%;
}

.navbar ul:after {
content: "";
clear: both;
display: block;
}

.navbar ul li {
display: block;
}

.navbar ul ul {
position: relative;
left: 0;
top: 16.5px;
width: 100%;
display: none;
font-size: 80%;
}

.navbar ul li:hover ul  {
display: block;
}

.navbar ul ul li {
background: rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0.05);
letter-spacing: 1px;
}

.navbar ul ul li:hover {
background-color: rgba(0,0,0,0.4)
}

.navbar ul li a {
display: block;
text-decoration: none;
color: white;
opacity: 0.8;
}

.navbar ul li a:hover {
opacity: 1;
}

.navbar ul ul ul {
position: absolute;
background-color: rgba(0,0,0,0.1);
left: 100%; 
top: 0;
color: white;
min-width: 150%;
font-size: 60%;
letter-spacing: 1px;
}

.navbar ul ul ul li {
display: none;
}

.navbar ul ul li:hover > ul li {
display: block;
}

这是在这里的某个地方，但我真的不知道在哪里或有什么要改变以达到我想要的效果。

提前感谢你花在帮助我的时间！

我诚挚的问候，

Raymond the Hammer

Answer 1

您的CSS存在一些问题：

1

.navbar ul li {
  display: inline-block; /* instead of block - this makes the list items horizontal */
}

2

.navbar ul ul {
  /* removed some rules that were causing bad positioning */
  position: absolute; /* instead of relative - stops pushing other menu items around */
  display: none;
  font-size: 80%;
}

3

.navbar ul {
  position: absolute; /* rather than relative - stops pushing other menu items around */
  display: block;
  list-style: none;
  left: 30px;
  font-size: 210%;
}

它仍然看起来不像你的图片，但我猜你从你的帖子中遗漏了一些CSS。

Fiddle

Answer 2

您可以尝试将display: inline添加到您的CSS编码中，但是我不太确定这是否会根据您的布局实现您的需求。

主导航列表显示在彼此下方，尝试完成水平导航列表

2 个答案: