Html 粘性topnav,但不显示下拉列表
我想做一个水平的导航栏,用下拉菜单粘在顶部。问题是,当我使导航栏粘滞时,下拉菜单不再显示 我使用了以下CSS3来实现粘性效果。有没有其他方法可以达到同样的效果,特别是使用CSSHtml 粘性topnav,但不显示下拉列表,html,css,navigation,Html,Css,Navigation,我想做一个水平的导航栏,用下拉菜单粘在顶部。问题是,当我使导航栏粘滞时,下拉菜单不再显示 我使用了以下CSS3来实现粘性效果。有没有其他方法可以达到同样的效果,特别是使用CSS .topnav { overflow: hidden; background-color: #333; position: fixed; /* This line adds stickyness */ top: 0; /* along wi
.topnav {
overflow: hidden;
background-color: #333;
position: fixed; /* This line adds stickyness */
top: 0; /* along with this line here */
width: 100%;
}
最小问题示例:
正文{
保证金:0;
字体系列:Arial、Helvetica、无衬线字体;
}
托普纳夫先生{
溢出:隐藏;
背景色:#333;
位置:固定;
排名:0;
宽度:100%;
}
.topnav a{
浮动:左;
显示:块;
字体大小:16px;
颜色:白色;
文本对齐:居中;
填充:14px 16px;
文字装饰:无;
}
.下拉列表{
浮动:左;
溢出:隐藏;
}
.下拉菜单{
字体大小:16px;
边界:无;
大纲:无;
颜色:白色;
填充:14px 16px;
背景色:继承;
字体家族:继承;
保证金:0;
}
.topnav a:悬停,
.dropdown:悬停.dropbtn{
背景色:红色;
}
.下拉内容{
显示:无;
位置:绝对位置;
背景色:#f9f9f9;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
.下拉内容a{
浮动:无;
颜色:黑色;
填充:12px 16px;
文字装饰:无;
显示:块;
文本对齐:左对齐;
}
.下拉列表内容a:悬停{
背景色:#ddd;
}
.下拉:悬停.下拉内容{
显示:块;
}
梅因先生{
填充:16px;
边缘顶部:30px;
高度:1500px;
/*在本例中用于启用滚动*/
}
下拉列表
v
固定顶菜单
滚动此页面以查看效果
滚动时,导航栏将停留在页面顶部
导航栏中的下拉菜单
将鼠标悬停在“下拉”链接上以查看下拉菜单
这是因为下拉列表是绝对定位的,它不会根据固定导航条定位,而是根据最近的相对定位元素定位。它可以用一个固定位置的额外包装器快速固定
正文{
保证金:0;
字体系列:Arial、Helvetica、无衬线字体;
}
托普纳夫先生{
溢出:隐藏;
背景色:#333;
}
.固定{
位置:固定;
排名:0;
宽度:100%;
}
.topnav a{
浮动:左;
显示:块;
字体大小:16px;
颜色:白色;
文本对齐:居中;
填充:14px 16px;
文字装饰:无;
}
.下拉列表{
浮动:左;
溢出:隐藏;
}
.下拉菜单{
字体大小:16px;
边界:无;
大纲:无;
颜色:白色;
填充:14px 16px;
背景色:继承;
字体家族:继承;
保证金:0;
}
.topnav a:悬停,
.dropdown:悬停.dropbtn{
背景色:红色;
}
.下拉内容{
显示:无;
位置:绝对位置;
背景色:#f9f9f9;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
.下拉内容a{
浮动:无;
颜色:黑色;
填充:12px 16px;
文字装饰:无;
显示:块;
文本对齐:左对齐;
}
.下拉列表内容a:悬停{
背景色:#ddd;
}
.下拉:悬停.下拉内容{
显示:块;
}
梅因先生{
填充:16px;
边缘顶部:30px;
高度:1500px;
/*在本例中用于启用滚动*/
}
下拉列表
v
固定顶菜单
滚动此页面以查看效果
滚动时,导航栏将停留在页面顶部
导航栏中的下拉菜单
将鼠标悬停在“下拉”链接上以查看下拉菜单
这是因为下拉列表是绝对定位的,它不会根据固定导航条定位,而是根据最近的相对定位元素定位。它可以用一个固定位置的额外包装器快速固定
正文{
保证金:0;
字体系列:Arial、Helvetica、无衬线字体;
}
托普纳夫先生{
溢出:隐藏;
背景色:#333;
}
.固定{
位置:固定;
排名:0;
宽度:100%;
}
.topnav a{
浮动:左;
显示:块;
字体大小:16px;
颜色:白色;
文本对齐:居中;
填充:14px 16px;
文字装饰:无;
}
.下拉列表{
浮动:左;
溢出:隐藏;
}
.下拉菜单{
字体大小:16px;
边界:无;
大纲:无;
颜色:白色;
填充:14px 16px;
背景色:继承;
字体家族:继承;
保证金:0;
}
.topnav a:悬停,
.dropdown:悬停.dropbtn{
背景色:红色;
}
.下拉内容{
显示:无;
位置:绝对位置;
背景色:#f9f9f9;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
.下拉内容a{
浮动:无;
颜色:黑色;
填充:12px 16px;
文字装饰:无;
显示:块;
文本对齐:左对齐;
}
.下拉列表内容a:悬停{
背景色:#ddd;
}
.下拉:悬停.下拉内容{
显示:块;
}
梅因先生{
填充:16px;
边缘顶部:30px;
高度:1500px;
/*在本例中用于启用滚动*/
}
下拉列表
v
固定顶菜单
滚动此页面以查看效果
滚动时,导航栏将停留在页面顶部
导航栏中的下拉菜单
将鼠标悬停在“下拉”链接上以查看下拉菜单
您可以尝试下面的修复,我使用了display flex并删除了溢出:hidden;在你的.topnav课上。我希望这会有所帮助
<div class="topnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown <b>V</b></button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display:flex;
}
.topnav a,
.dropdown,
.dropdown .dropbtn {
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
}
.topnav a,
.dropdown .dropbtn{
padding: 14px 16px;
}
.dropdown .dropbtn {
background-color: transparent;
border: none;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
下拉列表V
固定顶菜单
滚动此页面以查看效果
滚动时,导航栏将停留在页面顶部
导航栏中的下拉菜单
将鼠标悬停在“下拉”链接上以查看下拉菜单
身体{
保证金:0;
字体系列:Arial、Helvetica、无衬线字体;
}
托普纳夫先生{
背景色