html - 主导航列表显示在彼此下方，试图实现水平导航

Question

我正在尝试制作一个完整的 css/html 导航栏，我解决了上一个问题但遇到了一个新问题。

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

此外，我认为一直到左侧的文本看起来都不流畅，我很确定必须有一些简单的修复方法。

<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;
}

它在这里的某个地方，但我真的不知道在哪里或更改什么才能获得我想要的效果。

预先感谢您花时间帮助我!

我真诚的问候，

雷蒙德之锤

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