向下浮动的下拉菜单

Question

我制作了一个菜单，我希望下拉列表在“Fruitsoorten”标签下方居中。但现在所有三个项目都是彼此相邻的。 有谁知道如何解决这一问题？提前谢谢。

nav {
  float: right;
  border-radius: 15px;
  margin-right: 15%;
}
nav ul {
  list-style-type: none;
  margin-top: 55px;
  background-color: black;
}
nav li {
  display: inline-block;
  position: relative;
  padding: 10px;
}
nav li ul {
  display: none;
}
nav li li {
  display:
}
nav li:hover ul {
  display: block;
}
nav a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}
nav li:hover {
  background-color: gray;
}

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li>
      <a href="geschiedenis.html">Fruitsoorten</a>
      <ul>
        <li><a href="team.html">Kersen</a></li>
        <li><a href="team.html">Appels</a></li>
        <li><a href="team.html">Pruimen</a></li>
      </ul>
    <li>
    <li><a href="team.html">Team</a></li>
    <li><a href="agenda.html">Agenda</a></li>
    <li><a href="fotos.html">Foto's</a></li>
    <li><a href="vacatures.html">Vacatures</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Answer 1

您也可以尝试这种风格。 http://codepen.io/nehemc/pen/LkyQvq

nav {
  float: right;
  border-radius: 15px;
  margin-right: 15%;
}

nav ul {
  list-style-type: none;
  margin-top: 55px;
  background-color: black;
}

nav li {
  display: inline-block;
  position: relative;
}

nav a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 10px;
  display:block;
}

nav ul ul {
  display: none;
  position: absolute;
  z-index: 999;
  left: 0;
  margin-top: 0;
}

nav li:hover ul {
  display: block;
}

nav li:hover {
  background-color: gray;
}

Answer 2

添加以下代码以反映

nav ul { margin-top: 0; } 
nav li ul {
    display: none;
    position: absolute;
    left: 0;
    z-index: 9;
}

同时正确关闭</li>

，清除HTML代码

Answer 3

仅限inline-block样式为主ul， 这样做：

nav>ul>li {
  display: inline-block;
  position: relative;
  padding: 10px;
}

而不是

nav li { display: inline-block; position: relative; padding: 10px; }

＆＃13;

＆＃13;

nav {
  float: right;
  border-radius: 15px;
  margin-right: 15%;
}
nav ul {
  list-style-type: none;
  margin-top: 55px;
  background-color: black;
}
nav>ul>li {
  display: inline-block;
  position: relative;
  padding: 10px;
}
nav li ul {
  display: none;
}
nav li li {
  display:
}
nav li:hover ul {
  display: block;
}
nav a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}
nav li:hover {
  background-color: gray;
}

＆＃13;

<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="geschiedenis.html">Fruitsoorten</a>
      <ul>
        <li><a href="team.html">Kersen</a>
        </li>
        <li><a href="team.html">Appels</a>
        </li>
        <li><a href="team.html">Pruimen</a>
        </li>
      </ul>
    </li>
    <li><a href="team.html">Team</a>
    </li>
    <li><a href="agenda.html">Agenda</a>
    </li>
    <li><a href="fotos.html">Foto's</a>
    </li>
    <li><a href="vacatures.html">Vacatures</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 4

就是你想要的？

nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}

nav ul {
list-style-type: none;
background-color: black;
}

nav li {
display: inline-block;
position: relative;
padding: 10px;
}

nav li ul {
display: none;
}

nav li li {
display: 
}

nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}

nav a {
text-decoration: none;
color: white;
font-size: 20px;
}

nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}

    <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="geschiedenis.html">Fruitsoorten</a>
                <ul class="inner">
                    <li><a href="team.html">Kersen</a></li>
                    <li><a href="team.html">Appels</a></li>
                    <li><a href="team.html">Pruimen</a></li>
                </ul>
                <li>
                <li><a href="team.html">Team</a></li>
                <li><a href="agenda.html">Agenda</a>
                <li><a href="fotos.html">Foto's</a></li>
                <li><a href="vacatures.html">Vacatures</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>