css 如何使下拉菜单链接垂直下拉而不改变导航栏的顺序

6ojccjat 于 2023-01-06 发布在其他

关注(0)|答案(3)|浏览(167)

我试着在我的导航栏中包含一个标签的下拉列表，我正在尝试（我使用了w3schools的演示），但是为了使下拉链接垂直显示（当我悬停在上面时），我需要放置display: inline-block;，但是这使得我的多媒体标签到导航栏的末尾，与我的关于栏交换位置，所以基本上我希望我的链接看起来像这样：

和导航栏变成这样

.
但是，如果我希望下拉链接看起来像我想要的，就会发生这种情况

它也可以在演示中工作，但当我添加自己的代码来自定义导航栏时，链接最终看起来像这样：

我试着用flex-box (using flex-direction: column)和一切，但它没有工作，我不知道该怎么做，你们有任何其他的建议/如果我做错了什么？我希望关于页面在最后

css

来源：https://stackoverflow.com/questions/75013861/how-to-make-dropdown-menu-links-drop-down-vertically-without-changing-order-of-t

3条答案

按热度按时间

k3fezbri1#

我只是用了你的代码做了点调整：

/* Dropdown Button */
   .dropbtn {
     background-color: #04AA6D;
     color: white;
     padding: 16px;
     font-size: 16px;
     border: none;
   }
   
   /* The container <div> - needed to position the dropdown content */
   .dropdown {
     position: relative;
     display: inline-block;
   }
   
   /* Dropdown Content (Hidden by Default) */
   .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f1f1f1;
     min-width: 100px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 1;
     margin: auto;
   }
   
   /* Links inside the dropdown */
   .dropdown-content a {
     color: black;
     text-decoration: none;
     min-width: 100px;
     margin: auto;
   }
   
   /* Change color of dropdown links on hover */
   .dropdown-content a:hover {background-color: #ddd;}
   
   /* Show the dropdown menu on hover */
   .dropdown:hover .dropdown-content {display: block;}
   
   /* Change the background color of the dropdown button when the dropdown content is shown */
   .dropdown:hover .dropbtn {background-color: #3e8e41;}
   
   topnav {
     overflow: hidden;
     background-color: #9e2118;
   }
   
   .topnav a {
     float: left;
    
     color: #black;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
   }
   
   .topnav a:hover {
     background-color: rgb(187, 98, 98);
     color: black;
   }
   
   .topnav a.active {
     background-color: rgb(107, 0, 0);
     color: white;
   }
   
   .topnav .icon {
     display: none;
   }

赞(0）回复(0）举报 2023-01-06

sbdsn5lh2#

在类dropdown-content中，将display属性值更改为flex，并在同一个类中添加flex-direction属性，其值为column

.dropdown-content {
    display: flex;
    flex-direction: column;
}

它看起来像x1c 0d1x

弯曲方向仅在显示值为弯曲/内联弯曲时有效

赞(0）回复(0）举报 2023-01-06

lb3vh1jj3#

欢迎来到StackOverflow Sekani，你应该这样尝试

a {
  text-decoration: none;
}

nav {
  font-family: monospace;
}

ul {
  background: green;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: green;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}
  
li a {
  color: #fff;
}

li:hover,
li:focus-within {
  background: red;
  cursor: pointer;
}

li:focus-within a {
  outline: none;
}

ul li ul {
  background: green;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block
}

ul li ul li {
  clear: both;
  width: 100%;
}

<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Multimedia</a>
      <ul class="dropdown">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
  </ul>
</nav>

赞(0）回复(0）举报 2023-01-06

我来回答

css 如何使下拉菜单链接垂直下拉而不改变导航栏的顺序

3条答案

相关问题

热门标签

最新问答