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

您快到了。您需要针对.dropdown类对CSS进行一些调整。

您可以阅读有关flexbox here的更多信息。在这里，我们主要为.dropdown类设置以下flexbox属性，以获取所需的行为：

display: flex;
flex-direction: column; 
justify-content: space-around;

演示：https://codepen.io/anon/pen/XwqwOd

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

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

.drop-down {
  display: none;
  padding: 0;
  flex-direction: column;
  justify-content: space-around;
}

.site-nav > ul > li:hover .drop-down {
  display: flex;
  position: absolute;
  background-color: rgba(1, 80, 114, 0.5);
  height: 9em;
}

.site-nav ul {
  list-style: none;
}

Answer 2

您不得显示<li>内联代码块。

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

如何使下拉菜单视图变为垂直？

2 个答案: