Question

现在我终于将导航栏居中，我在导航栏中有了一个子菜单现在，我试图使其正常工作，但是我所有的链接都被破坏了：-/ 所以希望有人可以向我解释为什么它不想按照我的方式工作？我想保持导航栏的样式，目前正在与CSS一起玩以获得我的子菜单正常工作，但它一直在破坏它：-/。还在添加display：inline;时对我的.topnav ul而言，它不再居中，我已经看过视频，但是即使在我的导航栏中也无法使用。我知道我做错了什么，但是呢？（可能会有点混乱，原因是我分离了测试代码，对此感到抱歉！）

                           /*Topnav*/
.topnav { 
    width: 100%; 
    opacity: 1;
    background-color: rgba(255,255,255,0.6);
    margin-bottom: 10px; 
    padding: 5px 0px 5px 0; 
	border-bottom: dotted #66A761;
	border-top: dotted #66A761;
	position:relative;
}

.topnav ul {
    text-align: center;
}

.topnav ul li {
    display: inline; 
    margin-left: 15px;	
}

.topnav a {
    font-size: 20px; 
    font-weight: bold; 
    text-decoration: none;
}

.topnav a:visited {
    color: #FFF;
}

.topnav a:link {
    color :#9F257D;
}

.topnav a:hover {
    color: #66A761;
}

.topnav input {
    float: right;
    padding: 3px;
    margin: 0 5px;
    position: absolute;
    right: 20px;
}
 
                           /*submenu testing*/


.topnav ul li ul li {
	display: none;
}
.topnav ul li:hover ul li {
	display: block;
}

                           <!--Topnav-->
<div class="topnav">
    <nav>
    <ul>
        <li><a href="aboutblank.html">recepten</a>
		  <ul>
             <li><a href="aboutblank.html">lactosevrij</a></li>
             <li><a href="aboutblank.html">suikervrij</a></li>
             <li><a href="aboutblank.html">glutenvrij</a></li>
          </ul>
		</li>
        <li><a href="aboutblank.html">varianten</a>
		  <ul>
             <li><a href="aboutblank.html">basis</a></li>
             <li><a href="aboutblank.html">standaard</a></li>
             <li><a href="aboutblank.html">luxe</a></li>
          </ul>
		</li>
        <li><a href="aboutblank.html">contact</a></li>
        <li><a href="aboutblank.html">over ons</a></li>
        <input type="text" style="right:0" placeholder="Search..">
    </ul>
    </nav>
</div>

Answer 1

.topnav li {
  position:relative;
}
.topnav li ul {
  position: absolute;
  top:25px;
  left:0px;
  background-color: #fff;
}

如果打算将这些子菜单用作下拉菜单，则可能需要将其位置设置为绝对，但请注意，必须使wrapper元素相对，否则可能会将视口用作锚点。

Answer 2

您的意思还不是很清楚，但是听起来像您想要一个带有下拉菜单的水平导航。

E.G：

/*Topnav*/

.topnav {
  width: 100%;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
  padding: 5px 0px 5px 0;
  border-bottom: dotted #66A761;
  border-top: dotted #66A761;
  position: relative;
}

.topnav ul {
  text-align: center;
  display: flex;
  justify-content:space-between;
}

.topnav ul li {
  display: inline-block;
  margin: 0 7px;
  padding: 0;
  text-indent: 0;
  position: relative;
}

.topnav ul li ul {
  display: block;
  position: absolute;
  top: 100%;
  left: -100px;
  right: -100px;
  margin: 0;
  padding: 0;
}

.topnav ul li ul li {
  display: block;
  margin: 0;
  padding: 0;
  text-indent: 0;
}

.topnav a {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.topnav a:visited {
  color: #FFF;
}

.topnav a:link {
  color: #9F257D;
}

.topnav a:hover {
  color: #66A761;
}

.topnav input {
  padding: 3px;
  margin: 0 5px;
}


/*submenu testing*/

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

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

<!--Topnav-->
<div class="topnav">
  <nav>
    <ul>
      <li><a href="aboutblank.html">recepten</a>
        <ul>
          <li><a href="aboutblank.html">lactosevrij</a></li>
          <li><a href="aboutblank.html">suikervrij</a></li>
          <li><a href="aboutblank.html">glutenvrij</a></li>
        </ul>
      </li>
      <li><a href="aboutblank.html">varianten</a>
        <ul>
          <li><a href="aboutblank.html">basis</a></li>
          <li><a href="aboutblank.html">standaard</a></li>
          <li><a href="aboutblank.html">luxe</a></li>
        </ul>
      </li>
      <li><a href="aboutblank.html">contact</a></li>
      <li><a href="aboutblank.html">over ons</a></li>
      <input type="text" placeholder="Search..">
    </ul>
  </nav>
</div>

Answer 3

我又改变了整个事情，让它做出反应，只有两个问题

1 我只能进入子菜单中的第一个链接，一旦我用光标向下滑动，它就会在我点击其他一个或多个链接之前关闭。（在摘要中有效）

2 不能将我的链接按原样放在页面上徽标下方的中间位置，它们之间的空格是完美的。

                           /*Topnav*/

.topnav {
      width: 100%;
      opacity: 1;
      background-color: rgba(255, 255, 255, 0.6);
      margin-bottom: 10px;
      padding: 5px 0px 5px 0;
      border-bottom: dotted #66A761;
      border-top: dotted #66A761;
      position: relative;
}

.topnav ul {
      display: inline;
	  text-align: left;
}

.topnav ul li {
      display: inline-block;
      margin: 0 7px;
      padding: 0;
      text-indent: 0;
      position: relative;
	  cursor: pointer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
}


.topnav a {
      font-size: 20px;
      font-weight: bold;
      text-decoration: none;
}

.topnav a:visited {
      color: #FF00E0;
}

.topnav a:link {
      color: #9F257D;
}

.topnav a:hover {
      color: #66A761;
}

.topnav input {
      float: right;
      padding: 3px;
      margin: 0 5px;
      position: absolute;
      right: 20px;
}


                          /*submenu testing*/


.topnav ul li ul {
      display: block;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.6);
	  padding: 5px 5px;
	
}

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

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

<div class="topnav">
    <nav>
    <ul>
        <li><a href="aboutblank.html">recepten</a>
		  <ul>
             <li><a href="aboutblank.html">lactosevrij</a></li>
             <li><a href="aboutblank.html">suikervrij</a></li>
             <li><a href="aboutblank.html">glutenvrij</a></li>
          </ul>
		</li>
        <li><a href="aboutblank.html">varianten</a>
		  <ul>
             <li><a href="aboutblank.html">basis</a></li>
             <li><a href="aboutblank.html">standaard</a></li>
             <li><a href="aboutblank.html">luxe</a></li>
          </ul>
		</li>
        <li><a href="aboutblank.html">contact</a></li>
        <li><a href="aboutblank.html">over ons</a></li>
        <input type="text" style="right:0" placeholder="Search..">
    </ul>
    </nav>
</div>

添加子菜单会破坏我的导航，有人吗？

3 个答案: