1回答
我这里有以下JS Fiddle作为示例：
原版JS Fiddle:
我正试图使导航是正确的，甚至标签，填补整个导航菜单的平等空间。我的另一个问题是，我需要具有相同的下拉宽度和标签宽度，以便下拉列表在打开时与选项卡对齐。我能够通过将ul下拉列表的宽度设置为100%并使用flex来实现这一点。
JS Fiddle与正当Nav:
CSS
.nav {
display: flex;
width: 100%;
}
.nav li {
background-color: #e3e3e3;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 10
浏览 2提问于2016-12-08得票数 0
回答已采纳
我在velocity页面中嵌入了一个flex对象。在flex对象之上，我有我的导航栏，它有许多用Javascript构建的下拉组件。
当我单击下拉列表时，它们似乎落在了Flex对象的后面。就像Flex对象位于Javascript所在的层之上一样。
有没有人遇到这个问题并找到了解决办法？
浏览 1提问于2009-01-28得票数 0
回答已采纳
2回答
我想做一个导航标题菜单使用flexbox，使其响应的将看起来。
我的想法是在主导航上使用一个display: flex; flex-direction: row; justify-element: space-between;，然后为两个菜单应用另一个display: flex; flex-direction: row;，一个使用justify-element: flex-start;，另一个使用justify-element: flex-end;
这是一种正确的方法，还是你认为有更好的方法来做同样的事情？我也想有一些下拉菜单下的一些菜单项，但目前我只是考虑的主要结构的导航
谢谢!
浏览 11提问于2020-05-19得票数 0
回答已采纳
1回答
我在我的个人网站上工作。父标头被放置在一个柔性盒中：
HTML：
<header class="main">
<div class="content">
<div class="logo">
<a href="#"><img src="image.png" alt="" /></a>
</div>
<div class="navigation">
浏览 0提问于2016-03-03得票数 0
回答已采纳
我正在尝试让Bootstrap 4导航栏下拉菜单直接出现在导航栏的正下方，但默认情况下，它会出现在导航栏底部边缘的上方。
有没有一种方法可以做到这一点，而不是为导航栏设置一个固定的高度，并使用下拉菜单上的空白处？
如果我没记错的话，Bootstrap 3中的默认设置是将下拉菜单的上边缘与导航栏的下边缘对齐。这似乎在BS4中发生了变化。
这是我的HTML：
<div class="navbar navbar-expand-lg flex-row shadow">
<ul class="navbar-nav navbar-desktop fl
浏览 17提问于2019-11-08得票数 0
2回答
我有个肚脐，里面有下坠。当展开的时候，我想让下拉列表坐在肚脐下面的内容的顶部。相反，它扩展了整个导航条，使其包含dropbox，并将所有内容向下推。我想要一个纯CSS解决方案，我不使用CSS框架。
我在我的代码中使用flex块，我想知道获得我想要的效果的正确和最简单的方法。
下面的代码是我所能做的最简单的，但请记住，我将使导航条响应我的实际网页。
下拉列表在div和class="dropdown"中。
CSS
.navbar {
display: flex;
justify-content: space-between;
background-color
浏览 3提问于2020-03-15得票数 0
回答已采纳
有没有办法用React Native在HTML中创建一个下拉导航菜单，其中下拉部分绝对位于菜单下方的内容之上？ 如果没有绝对定位，dropdown的父元素(下图，蓝色背景)会增加其高度，而其他内容则在dropdown的下方。 当我在下拉列表中使用位置绝对时，它位于第1项之上，而不是它之下，因为React Native相对于父对象定位绝对位置。 我的代码： <View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-b
浏览 37提问于2020-10-15得票数 0
回答已采纳
我有一个固定顶部的导航栏，取自bootstrap官方网站上的。
我已经向导航栏添加了两个下拉菜单，但是当导航栏展开时，它会在导航栏中打开，而不是在导航栏的顶部。
下拉列表已关闭：
已打开下拉列表：
下面是我的头代码：
<header>
<nav class="navbar navbar-dark fixed-top d-flex p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/">Test&l
浏览 0提问于2019-08-08得票数 0
1回答
我在youtube 上创建了一个移动导航系统。
在中显示的导航下垂是完全不透明的，下拉式后面没有显示出来。但是，只有在“评论列表”页面上，即排序和添加评审元素所在的页面上，下拉显示下面的元素会使移动导航出现混乱，如所示。
我使用的反应，MUI材料图标的‘添加’图标和MUI选择的排序和顺序由。
我已经从MUI中切换了add图标，并用Fontawesome替换了它，但是问题仍然出现。
我还尝试将下拉列表的Z-索引设置为1，并将下面的add图标的Z索引设置为-1，但这似乎只会禁用下拉列表下的add元素。
我也尝试过在下拉列表中添加一个“不透明:1”，这似乎也不会改变任何事情。
// navbar c
浏览 8提问于2022-02-20得票数 2
回答已采纳
众所周知，SuperTabNavigator是一个来自flexLib的开源组件，它比Flex Tab Navigator更有优势，我们可以使用SuperTabNavigator从每个标签上的close按钮关闭标签。此外，在选项卡导航器的右侧有一个按钮，它显示了一次打开的所有选项卡的列表，我们可以从该按钮中选择任何选项卡，这是一个PopupButton。现在发生的情况是，当我们关闭选项卡时，它也会从PopupButton下拉列表中消失。但在我的例子中，我希望下拉菜单记住关闭的选项卡，这样当我单击关闭的选项卡时，它会在选项卡导航器中再次打开。我是Flex和ActionScipt的新手，非常感谢所有
浏览 0提问于2011-12-21得票数 2
我正在创建一个使用Bulma文件的网页，而且我在导航栏上有一个问题。所以我试着在导航栏中定制下拉列表，包括并排链接，而不是上下链接。这是Bulma中默认的下拉列表：
但是，我想创造出这样的东西.但有多行
这就是我的问题所在。我不能让他们走到新的线后，最大宽度是达到，他们只是继续往右边，如果我有很多项目。
这是HTML元素结构：
<div class="navbar-item has-dropdown is-hoverable">
<a id="trending
浏览 4提问于2021-07-07得票数 1
回答已采纳
2回答
我目前正在建立一个下拉式导航条，可以在悬停时激活。
我希望下拉导航直接显示在投资组合链接下，当它悬停时，它现在显示在右边。
造型和什么不来以后，我希望这一点排序，然后继续进行。
<div class="twelve columns">
<ul class="navigation six columns offset-by-three">
<li><a href="#">HOME</a></li>
&l
浏览 2提问于2016-08-08得票数 1
回答已采纳
3回答
我已经创建了一个带有flex属性的导航栏。现在我希望向导航栏中的一个元素添加一个下拉菜单，但它不能像预期的那样工作。
@font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
}
nav {
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
}
nav ul {
浏览 63提问于2017-04-09得票数 5
回答已采纳
我试着做一个边栏，在上面有一个下拉选项，然后是我的导航，然后在导航的底部有一些控制：
期望结果
-My下拉
-My主导航
-nav项目
-nav项目
-space
-space
-My控件
-control
-control
当前结果
-My下拉
-My主导航
-nav项目
-nav项目
-My控件
-control
-control
SCSS
.nav-container {
height: 100vh;
background-color: #111720;
display: flex;
flex-direction: column;
align-items: flex-
浏览 0提问于2019-11-07得票数 1
回答已采纳
如你所见，我在下拉列表中遇到了问题。当屏幕大于768px (这是我在媒体查询中设置的宽度)时，它工作得很好，但当屏幕宽度现在等于或小于768px时，下拉菜单不会显示在导航之外，而是在导航栏内折叠。请看图片，看看发生了什么。
我已经尝试了z-index，position属性等，但没有一个有效。
如何使下拉菜单显示在导航栏之外，而不是折叠在导航栏内？
这是我的导航HTML：
<nav class="navbar navbar-default">
<div class="container-f
浏览 0提问于2017-12-21得票数 0
我是React的新手，我正在为一个朋友开发一个网站，这个网站使用了很多react功能。这个网站需要的一件事是一个导航栏，导航栏中的每个项目都有一个附加导航项目的下拉选择。我既可以有条件地将页面呈现为独立的导航项目，也可以在每个导航项目上创建悬停下拉菜单，但我的问题是将它们合并在一起。我尝试了一些方法，比如通过道具映射两次，创建一个大对象，其中nav项是一个名称，下拉项是子名，但这两种方法都不起作用。
下面是我使用的代码：
function Nav(props) {
const [navItemList, setNavItemList] = useState([
{nam
浏览 0提问于2021-12-01得票数 0
我使用的是Angular8应用程序，在其中我有导航栏，我有3个下拉值，即代理、潜在客户和竞争对手，如果我单击代理，它不会高亮显示，所以即使是我单击的下拉值，它也应该保持突出显示，除非我手动单击其他选项。
HTML：
<li>
<a data-toggle="collapse" href="#collapseExample" class="d-flex align-items-center">
<i class="fas fa-bullhorn"></i>
浏览 17提问于2021-05-20得票数 0
1回答
我已经创建了一个响应性下拉导航菜单，但有一个问题，您可以帮助我解决。当视图是用于台式机和平板电脑时，菜单工作正常。然而，当视图是针对移动设备时，我将我的导航菜单显示为块元素。“下拉”元素有一个下拉列表。我想当有人悬停在下拉元素和下拉列表显示，按下“照片”元素，而不是显示下拉列表在上面。
谢谢
HTML代码：
<nav class="nav-main">
<div class="logo">Random Text</div>
<ul class="u
浏览 2提问于2016-09-04得票数 0
回答已采纳
1回答
我需要创建一个下拉导航菜单，包装到两行时，它真的很长。
通过在菜单上设置以下CSS属性，我可以获得所需的结果。
.dynamic {
position: absolute;
max-height: 80px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
然而，这在Internet Explorer11上不起作用。项目不会像在Chrome上那样换到下一行。
这是一个
如果我使用height: 80px而不是max-height: 80px;，它可以工作，但这对我不起作用，因为我希望菜单随着项目的增长而增长
浏览 0提问于2016-04-26得票数 1
1回答
jQuery双下垂导航问题
、、、、
我已经为一个wordpress多站点创建了一个jQuery下拉导航，这个导航非常好，但是一旦一个下拉列表发生了一次，并且用户单击了导航中的另一个下拉链接，现有的下拉列表仍然显示如下：。
当单击导航中的另一项时，我希望删除显示该下拉列表的两次，以便只有一项显示如下所示：
以下是构成导航的代码：
<script>
jQuery(document).ready(function( $ ) {
jQuery( ".divisionslink" ).click(function() {
jQuery( ".divisions-submenu" ).to
浏览 1提问于2015-10-15得票数 0
回答已采纳
3回答
我为我的webapp提供了一个导航栏，其css设置如下：
.navigation {
background: white;
display: flex;
height: 5em;
align-items: center;
padding: 0px 2em;
color: blue;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.075em;
border-bottom: 1px solid #E6E6E6;}
我的问题是在移动，我的标签
浏览 4提问于2016-04-28得票数 0
回答已采纳
1回答
目前正在做一个快速的网站。导航样式和工作正常，但我实现了一个下拉作为一个导航项目。这导致了三个我似乎无法解决的问题：
在导航切换中，内容相互重叠。
在导航开关上，导航可以让你滚动，即使是在桌面屏幕上有空间展开下拉式悬停。
在桌面屏幕上，导航项会导致在带有滚动条的标题中出现下降。
在这个问题上停留一段时间，任何援助都将不胜感激。
function NavToggle() {
var tn = document.getElementById("nav-bar")
if (tn.style.display === "none") {
浏览 0提问于2018-02-27得票数 2
下面是我的代码： .dropdown-content {
position: absolute;
z-index: 1;
list-style: none;
border-radius: 0vh 0vh 1vh 1vh;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
浏览 76提问于2021-06-18得票数 0
我试着做一个导航栏，但不是所有的链接保持在相同的水平，下拉菜单的那些停留在导航栏之外的div，我不能对齐他们。
另外，具有下拉菜单链接的容器在下拉链接中没有居中。我不知道我怎么能把它集中起来。
.topnav {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #333;
}
.topnav a {
color: #f2f2f2;
padding: 10px;
text-decoration: none;
text-align:
浏览 6提问于2022-10-12得票数 1
当用户在相邻的div上盘旋时，我试图使div可见，但由于某种原因，它无法工作。导航链接是悬停的对象，而导航链接下拉是当用户在导航链接上盘旋时要显示的对象。格式如下：
.navigation-links-dropdown {
display: none;
}
.navigation-links:hover~.navigation-links-dropdown {
display: flex;
}
<div class="wrapper">
<div class="header">
<ul class="
浏览 2提问于2022-05-31得票数 -1
1回答
编辑:部分来源于@anji的评论，但主要问题仍然存在。当我在桌面视图上加载页面并将大小调整到移动视图(低于991px)时，单击不会展开下拉列表。窃听器很微妙。当我不做任何悬停或点击桌面大小，移动版本单击扩展下拉，但如果我做任何互动，如悬停在下拉或单击，然后调整大小到移动视图，按钮点击不会扩大下拉。但单击显示为从控制台中找到的注册。
我试图制作一个导航栏，水平版本将像往常一样在悬停状态下放下子菜单，但是当在垂直模式下(使用flex和媒体查询)时，下拉列表将在鼠标单击或点击电话屏幕时触发。同样在调整窗口大小时，当屏幕大小由手机增加到笔记本电脑时，下拉式将消失。
到目前为止，我已经完成了这个部分的
浏览 0提问于2019-08-08得票数 0
回答已采纳
我正在尝试使用一个带有下拉菜单的柔性盒导航菜单。出于某种原因，在悬停时，下拉列表显示在我正在悬停的容器的右侧。我想让他们显示在下面，像一个正常的导航菜单。
下面是一个代码库：
HTML：
<nav id="nav">
<ul class="nav-flex">
<li class="nav-brand-flex">
<a href=""><img src="img.png" \></a>
</li>
浏览 1提问于2015-05-05得票数 0
回答已采纳
1回答
我设计了一个导航条，它有导航项，下拉按钮，下拉菜单项目没有显示在显示上，这就是它的样子。
我曾用边距左移动注册导航项，认为它会移出，但它没有反应，还可以推断出其他解决方案吗？？我的密码是..。
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class=&
浏览 0提问于2019-02-07得票数 0
回答已采纳
我已经在我的angularJS控制器中使用jquery为我的导航栏创建了一个下拉列表：
$(".fa-bars").click(function() {
console.log('running ', dropDownDisplayed)
if (dropDownDisplayed == false) {
$("#links").css("display", "flex");
dropDownDisplayed = true;
console.log('dropdown di
浏览 0提问于2018-01-20得票数 0
1回答
我正在为我的导航栏构建一个下拉菜单。下拉菜单的样式看起来像我想要的那样。但是，我对下拉按钮的间距有一个问题。基本上，按钮被嵌入到宽度为160的div中，这基本上就是打开的下拉菜单的宽度。但是，我希望div只有按钮本身的宽度，而不是展开的下拉菜单的宽度。否则，带有大div的下拉菜单将移动导航栏的其他元素。 ? .button-container {
position: relative;
/*text-align: center;*/
padding: 0;
overflow:hidden;
display:flex; /*Code Ad
浏览 58提问于2021-01-30得票数 0
我需要让第二级导航栏出现在下拉式容器的顶部，如下所示：What I need to do 然而，我只能像这样做(迁移链接悬停)，使用flexbox：What I have done 下面是我用过的代码： .nav-more {
display: flex;
}
.more-dropdown {
position: relative;
display: flex;
}
.more-dropdown-content {
position: absolute;
display: flex;
flex-direction: column;
visibility:
浏览 18提问于2020-07-07得票数 1
回答已采纳
1回答
我有一个下拉菜单在我的导航，但当你悬停在它的链接显示在下拉按钮的右边，以及相互重叠。
我希望链接列在下拉按钮下面。
header {
padding: 10px 35px;
background-color: rgba(5, 69, 129, 0.7);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
top: 0;
}
header h1 {
font-weight: bold;
font-size: 36px;
color: rgba(240, 238, 238, 1
浏览 5提问于2022-08-29得票数 1
回答已采纳
1回答
我试着用下拉菜单做导航条。但是从"Product“中的下拉菜单稍微向右一点。我希望他们开始与他们的母公司“产品”保持一致。有人能帮我吗？另外我想用flex。不用flex，我就可以避免这个问题。这些是代码，您可以运行查看结果，悬停在“产品”上。
*{
list-style: none;
text-decoration: none;
}
.nav {
width: 100%;
height: 40px;
background-color: #ff6a00;
}
.nav ul{
margin:0px;
display: -webkit-box;/*
浏览 2提问于2015-07-24得票数 0
回答已采纳
1回答
下拉导航菜单未显示
、、、、
首先，我想说我对编码非常陌生，所以请记住这一点！
我试着创建一个下拉式导航条，我遇到了各种各样的问题。首先，在下拉菜单项之间有一些空格，我完全不明白。第二，实际的下垂部分在下垂时根本没有出现。我已经尝试了很长一段时间来解决这个问题，但我不知道问题出在哪里。
该网站的问题是：(下拉式一直在页面底部)
以下是html代码：
和css：
#drop_nav {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#drop_nav ul {
list-style-type: none;
width: 100
浏览 1提问于2022-10-11得票数 -2
3回答
我已经创建了一个下拉导航栏只使用html和css，它也有子菜单。如何将下面导航栏项上的第二项更改为不同的颜色。在下面的例子中，我需要将联系人链接背景的颜色更改为不同的颜色。我试过了:第九个孩子，但没有成功。
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
.nav a{
display: flex;
align-items: center;
justify-content: center;
color: aliceblue;
background: rgb(247, 18
浏览 7提问于2021-03-27得票数 0
回答已采纳
2回答
我在创建导航菜单时遇到了一些问题。我使用scaleY和transition的组合来使下拉列表在悬停时平滑地打开。然而，目前下拉链接仍然占用屏幕上的空间(参见代码片段)，而不是仅在父链接悬停时才这样做。
我曾尝试将display:none和display:block;添加到相关元素中；这是可行的，但它删除了transform创建的平滑过渡效果。
.site-navigation {
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
.menu li {
d
浏览 15提问于2019-12-02得票数 0
回答已采纳
1回答
我已经在我的html中创建了导航功能，我想让它变得自适应:当宽度小于764px时，删除这个图标并添加<nav> -button，它会在列模式下拉菜单中打开我的导航。我用的是flexbox，我想用clear JS。
第二个问题是，我的下拉菜单在打开时不占用空间，我应该使用position: ;或其他吗？
HTML：
<header>
<nav class="header__nav">
<div class="container">
<div class="
浏览 19提问于2019-11-05得票数 0
回答已采纳
3回答
尝试使用CSS和HTML创建一个下拉导航栏。我无法将嵌套列表从导航固定栏中附加到dis。
我跟踪了，但我开始迷失在代码中。只是需要有人检查我的密码。我觉得我没有正确地构造我的代码。我注意到人们在youtube在线视频中使用像li a, .dropbtn这样的东西，我不明白这是怎么回事。我读过的html/css书中说，通过添加一个空格(例如html body {margin: 0;} )，您可以将CSS应用于HTML的多个部分。我只是在这一点上迷路了
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
html
浏览 0提问于2019-03-27得票数 0
回答已采纳
1回答
我正在使用Bootstrap 4，并且已经创建了一个具有大的下拉菜单的导航，它使用来显示下拉CSS动画，并在主导航元素(下划线)上使用CSS转换。
当用户将鼠标悬停在子菜单/下拉菜单上时，是否可以保持主导航突出显示？在这种情况下，将鼠标悬停在下拉列表上时，请保持"Services“主导航元素突出显示。如果可能的话，我希望保持它是纯CSS的，但如果不是这样的话，可以使用jQuery。
这是我导航的HTML：
<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
浏览 5提问于2018-01-20得票数 1
回答已采纳
我正在学习网络开发，并为我的第一个项目是试图制作一个投资组合网站。然而，我对我的菜单之一的下拉部分有问题。我把一个:悬停伪类附加到我的下拉菜单中，这样它就知道什么时候打开下拉菜单。然而，它似乎并没有改变第67行的下拉导航类。我试着把psuedo类转换成只改变自己，它工作得很好，但是当我尝试更改一个兄弟类时，它就不起作用了。我想我搞砸了我的组合子？
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital@1&display=swap');
* {
margin: 0;
浏览 2提问于2022-01-09得票数 0
1回答
以下是未修复时发生的情况，这是我想要的行为，但我想要修复导航栏
下面是修复后发生的情况:它不会移动内容(它位于这个下拉列表的后面)
// scss for the nav
.filterbar {
position: fixed;
top: 0;
box-shadow: 0 0 15px black;
width: 100%;
// for info section
.filters-info {
margin-top: 110px;
display: flex;
justify-content: space-between;
浏览 0提问于2020-04-19得票数 0
2回答
我正在为我的网站的移动部分设置一个onclick下拉导航栏，问题是它需要双击才能下拉。我想要的结果是它在第一次点击时就会下拉。 到目前为止，我唯一尝试过的是一个Javascript函数，我将在我的代码中显示该函数。 function myFunction() {
var x = document.getElementById("submenu1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.disp
浏览 17提问于2019-02-01得票数 0
3回答
我试图使下拉菜单到我的导航栏，但当我悬停在伦敦标签，下拉菜单稍微放在右边。我不知道为什么会发生这种情况，我已经尝试过一些解决方案，但它们都没有成功。
我不知道如何使下拉菜单居中，所以它就在伦敦的标签下面。任何帮助或建议都将被采纳！
body {
font-family: Arial;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
paddi
浏览 3提问于2022-01-30得票数 1
回答已采纳
3回答
我使用flexbox创建了一个水平选项卡导航。大多数选项卡都有一个相关的下拉菜单。对于右边的选项卡，下拉菜单在较小的浏览器窗口上显示出1/2的下拉式菜单(但不小到可以翻转到我的移动css)。
我的下拉菜单目前是左对齐的父选项卡。我希望我的最右边的选项卡被定位，这样下拉列表的右边和父选项卡的右边成了一条线。
这个下拉列表很好，因为它位于导航的中间，所有的子菜单项目都可以读到：
这个下拉列表是不可读的，因为它从屏幕的右边掉下来：
/* tabbed nav container */
.main-navigation {
z-index: 2;
width: 100%;
浏览 10提问于2017-02-02得票数 4
回答已采纳
我有以下导航栏。
<nav class="navbar d-flex flex-nowrap navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Company Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=&
浏览 0提问于2020-06-23得票数 0
我一直在这里寻找一个例子，下拉导航菜单，做三件事：
当用户单击菜单下拉时，它显示下拉(此操作)，当用户单击导航区域外或页面上的任何其他位置关闭打开的下拉列表(这也有效)时，当用户单击另一个已打开的下拉菜单时，则关闭先前打开的下拉菜单并打开新的下拉菜单。<-(我被困在这里了).
当前，如果单击一个下拉菜单，然后单击另一个，则第一个选项将保持打开状态。如果您单击另一个下拉列表，则任何打开的其他菜单都要关闭。但我希望保留这样的行为，即当用户单击文档中任何位置的菜单外时，它也会关闭。
我找到了几个解决这些问题的帖子。然而，有时他们导航条只有一个下拉为例。其他时候，由于某种原因，这个解决方案会引起
浏览 2提问于2022-11-03得票数 1
回答已采纳
5回答
我有一个下拉菜单：
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Who are we</a></li>
<li><a>Habitat</a></li>
<li id="menu">
<
浏览 0提问于2018-06-13得票数 0
回答已采纳
1回答
我为一个带有html和css的网站构建了一个响应性导航栏。
一切都很好，但我希望下拉菜单是动画。
在不同的元素上，我尝试了各种类型的转换(高度和全部)，但最好是在下拉列表上实现延迟。
<div class="navigation">
<div class="toggle"><i class="fas fa-bars"></i></div>
<div class="navitems">
<div class="nav
浏览 0提问于2018-06-23得票数 0
回答已采纳
有一个问题和这个问题非常相似，这个问题已经解决了，但这个解决办法对我没有帮助。
我面临的问题是下拉列表没有遵循其父宽度( position: absolute在这里发挥作用)，我认为position: absolute是阻止整个导航条在访问下拉菜单时扩展的唯一方法。
那么，除了使用媒体查询和为每个设备定义宽度之外，还有什么方法可以使下拉列表遵循其父宽度吗？
如果我不能解释清楚的话请原谅我。，，这里是初学者。
谢谢
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #333;
}
ul {
浏览 6提问于2022-03-18得票数 -1
回答已采纳
2回答
我目前有以下脚本：
也就是说，如果单击其中一个导航，它就会下拉，如果单击另一个导航，现有的下拉列表将消失，而另一个下拉列表将会出现，如果我单击文档上的任何位置，无论打开的是哪个导航，它都将消失。
如果另一个导航已经下拉，我如何添加鼠标悬停，使另一个导航自动下拉。但是，如果没有下拉导航，则必须单击该导航才能使其下拉，依此类推。
浏览 0提问于2011-02-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
