html - 如何使下拉菜单 View 为垂直？

Question

site-nav {
    position: relative;
    top: 0.5em;
    left: 0;
    display: block;
    width: 80%;
    padding: 0.8em 2em 0 0;
    opacity: .95;
    background: none;
  }

 .site-nav ul li {
    display: inline-block;
    margin-left: 1.5em;
    margin-bottom: 0;
  }

 .drop-down {
    display: none;
  }

 ul li:hover ul {
    display:block;
    position: absolute;
    float: none;
    background-color: rgba(1,80,114,0.50);
    height: 9em;

<nav class="site-nav">
            <ul>
                <li><a href="#">PAVEIKTIE DARBI</a></li>
                <li class="pakalp"><a href="#">PAKALPOJUMI</a>
                    <ul class="drop-down">
                        <li><a href="#">ĢENERĀLUZŅĒMĒJS</a></li>
                        <li><a href="#">PROJEKTU VADĪBA</a></li>
                        <li><a href="#">PROJEKTĒŠANA</a></li>
                        <li><a href="#">BŪVDARBU VADĪBA</a></li>
                        <li><a href="#">MONTĀŽA</a></li>
                    </ul>
                </li>
                <li><a href="#">INŽENIERTEHNISKĀS SISTĒMAS</a></li>
                <li><a href="#">KONTAKTI</a></li>
            </ul>
        </nav>

我一直在为我的新业务制作这个网页，但我受困于导航栏 - 我无法将其作为垂直列表放置。相反，它显示为 flex。我写了很多代码，显然在某处搞砸了，但我找不到确切的位置。尝试了我可以在互联网上找到的所有内容(虽然没有检查暗网)，但我无法修复它。

这是我的 CSS

.site-nav {
    position: relative;
    top: 0.5em;
    left: 0;
    display: block;
    width: 80%;
    padding: 0.8em 2em 0 0;
    opacity: .95;
    background: none;
  }

 .site-nav ul li {
    display: inline-block;
    margin-left: 1.5em;
    margin-bottom: 0;
  }

 .drop-down {
    display: none;
  }

 ul li:hover ul {
    display:block;
    position: absolute;
    float: none;
    background-color: rgba(1,80,114,0.50);
    height: 9em;

这是我的 HTML

<nav class="site-nav">
            <ul>
                <li><a href="#">PAVEIKTIE DARBI</a></li>
                <li class="pakalp"><a href="#">PAKALPOJUMI</a>
                    <ul class="drop-down">
                        <li><a href="#">ĢENERĀLUZŅĒMĒJS</a></li>
                        <li><a href="#">PROJEKTU VADĪBA</a></li>
                        <li><a href="#">PROJEKTĒŠANA</a></li>
                        <li><a href="#">BŪVDARBU VADĪBA</a></li>
                        <li><a href="#">MONTĀŽA</a></li>
                    </ul>
                </li>
                <li><a href="#">INŽENIERTEHNISKĀS SISTĒMAS</a></li>
                <li><a href="#">KONTAKTI</a></li>
            </ul>
        </nav>

Answer 1

你不能让你的 <li>内联 block 显示。

.site-nav > ul > li{
   /* This makes the outer ul li elements  horizontal*/
   .display: inline-block;
}

 ul.drop-down li {
    /* This makes the inside ul li to be stacked*/
    display: block;
  }