Html 固定定位中断导航菜单
我有一个导航栏,其子菜单顺序如下: 导航>超视距>视距+视距>超视距>视距>视距 每个nav>ul>li下都有一个子菜单的div,该子菜单隐藏到 用户将鼠标悬停在nav>ul>li上。当导航没有定位功能时,此功能正常, 但当我设置位置:固定在导航上时,子菜单停止出现。我什么都试过了 我知道该怎么做,但我不知道为什么会这样。这不是特定于浏览器的,问题仍然存在于chrome、safari和firefox上 HTML:Html 固定定位中断导航菜单,html,css,web,Html,Css,Web,我有一个导航栏,其子菜单顺序如下: 导航>超视距>视距+视距>超视距>视距>视距 每个nav>ul>li下都有一个子菜单的div,该子菜单隐藏到 用户将鼠标悬停在nav>ul>li上。当导航没有定位功能时,此功能正常, 但当我设置位置:固定在导航上时,子菜单停止出现。我什么都试过了 我知道该怎么做,但我不知道为什么会这样。这不是特定于浏览器的,问题仍然存在于chrome、safari和firefox上 HTML: 问题在于nav,nav>ul>li+div ul>li>acss规则中的overf
问题在于
nav,nav>ul>li+div ul>li>a
css规则中的overflow:hidden
。删除溢出:隐藏
,它将为您工作
演示:
CSS:
您是否可以设置任何类型的工作示例,如JSFIDLE或CodePen,以便每个人都能更清楚地看到发生了什么?此外,W3C仅将
li
元素定义为ul
的子元素,而不是div
。因此,这可能会导致定位问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="navbar.css">
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<nav>
<ul>
<li><a class="top" href="TODO">Blog </a> </li>
<div>
<ul>
<li><a href="TODO">Blog1</a></li>
<li><a href="TODO">Blog2</a></li>
<li><a href="TODO">Blog3</a></li>
</ul>
</div>
<li><a href="TODO">Links </a></li>
<div>
<ul>
<li><a href="TODO">Link1</a></li>
<li><a href="TODO">Link2</a></li>
<li><a href="TODO">Link3</a></li>
</ul>
</div>
<li><a href="TODO">Projects</a> </li>
<div>
<ul>
<li><a href="TODO">Project1</a></li>
<li><a href="TODO">Project2</a></li>
</ul>
</div>
<li><a class="bottom" href="TODO">About</a> </li>
<div></div>
</ul>
</nav>
<header>
<p> My header </p>
</header>
<section>
<p> My section </p>
</section>
<footer>
<p> My footer </p>
</footer>
</body>
</html>
body {
background-color: #EBE8E4;
color: #222;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 15px;
}
nav {
position:fixed;
}
nav,nav > ul > li + div ul > li > a {
background-color: #fff;
border: 1px solid #dedede;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888;
text-decoration:none;
display: block;
margin: 8px 22px 8px 22px;
overflow: hidden;
width: 165px;
}
nav > ul > li + div ul > li > a {
margin:0px;
width:117px;
border:0px;
box-shadow: 0 0px 0px 0px;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
nav > ul > li:hover {
background-color: rgb( 40, 44, 47 );
}
nav > ul > li:hover > a {
color: rgb( 255, 255, 255 );
}
nav > ul > li + div {
background-color: rgb( 40, 44, 47 );
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
display: none;
margin: 0;
opacity: 0;
position: absolute;
width: 165px;
visibility: hidden;
}
nav > ul > li:hover + div,
nav > ul > li + div:hover {
display: block;
margin-left:165px;
margin-top:-56px;
opacity: 1;
visibility: visible;
background-color:rgb(255,255,255);
block-radius:4px;
}
nav > ul > li + div > ul > li:hover {
background-color: rgb(250,0,0);
border: 0px;
border-radius:4px;
}
nav > ul > li + div ul > li:hover > a {
background-color: rgb(40,44,47);
color: rgb( 250 , 250 ,250);
}
nav > ul > li + div ul > li {
display: block;
}
nav > ul > li + div ul > li > a {
color: #aaa;
background-color:#fff;
display: block;
padding: 12px 24px;
text-decoration: none;
}
nav > ul > li > div ul > li:hover > a {
background-color: rgba( 255, 255, 255, 0.1);
}
nav, nav > ul > li + div ul > li > a {
background-color: #fff;
border: 1px solid #dedede;
border-radius: 4px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
color: #888;
text-decoration:none;
display: block;
margin: 8px 22px 8px 22px;
width: 165px;
}