html - 导航栏内容显示不正确

标签 html css

我不确定为什么我在 .third-level 下拉内容中添加了 display: none 但它并没有像我预期的那样被隐藏悬停在二级内容上并立即显示所有内容。此外，所有 .third-level 内容也相互重叠。我不知道我是错了(应该是错的:/)还是遗漏了什么。提前致谢!

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'),
       url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('space-mono-v4-latin-regular.woff2') format('woff2'),
       url('space-mono-v4-latin-regular.woff') format('woff'),
       url('space-mono-v4-latin-regular.ttf') format('truetype'),
       url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Space Mono', monospace;
    background: #000;
  background: url(Galaxy.jpg);
  background-size: cover;
}

h2 {
  font-size: 3em;
  margin: 150px 0px 0px 120px;
  padding: 0px 0px 30px;
  color: #fff;
}

p {
    font-size: 1.2em;
    margin: 0px 0px 0px 120px;
    padding: 20px 0px 20px 50px;
    color: #fff;
  text-indent: 50px;
  width: 720px;
  word-wrap: break-word;
  border-left: 4px solid #fff;
}

.first-level {
    font-size: 24px;
    list-style: none;
    text-align: center;
    padding: 0px 0px 0px 0px;
    margin: -60px 0px 0px 0px;
    position: sticky;
    top: 10px;
    display: flex;
    justify-content: center;
}

.first-level a {
    text-decoration: none;
    line-height: 60px;
    color: #fff;
}

.first-level li {
    position: relative;
    text-align: center;
    height: 60px;
    width: 200px;
    background: rgba(0,0,0,0.5);
}

.first-level li:hover {
    background-color: teal;
}

.first-level li:hover ul {
    display: inline;
}

.second-level {
  position: absolute;
    display: none;
  top: 60px;
  left: 0;
  width: 200px;
  list-style: none;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

.second-level li {
    position: relative;
    height: 60px;
    background: rgba(0,0,0,0.6);
}

.second-level li:hover {
    background: teal;
}

.third-level {
  position: absolute;
    display: none;
  top: 0px;
  right: -200px;
    width: 200px;
  list-style: none;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

.third-level li {
    position: relative;
  height: 60px;
  background: rgba(0,0,0,0.6);
}

.third-level li:hover {
    background: teal;
}
<!DOCTYPE html>
<html>
    <head>
        <title>NavigationBar</title>
        <link rel="stylesheet" href="newnavbar.css" type="text/css">
    </head>
  <body>

    <ul class ="first-level">
        <li><a href="#">HOME</a></li>
        <li><a href="#">LAB 1-5</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 1</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 2</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 4</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 5</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        </li>
          <li><a href="#">LAB 6-8</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 6</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 7</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 8</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        <li><a href="#">LAB 9-11</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 9</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 10</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 11</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        <li><a href="#">LAB 12-14</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 12</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 13</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 14</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
            </ul>
    </ul>

        <h2>Title</h2>
        <p>(Placeholder text).</p>

  </body>
</html>

最佳答案

.first-level li:hover > ul 使用 > 而不是 .first-level li:hover ul。 .first-level li:hover ul 这将选择 .first-level 中的所有 ul .first-level li:hover > ul 选择父级为 .first-level

的所有 ul 元素

下面是帮助您理解 css 选择器的链接。希望这可以帮助。谢谢。

https://www.w3schools.com/cssref/css_selectors.asp 

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'),
       url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('space-mono-v4-latin-regular.woff2') format('woff2'),
       url('space-mono-v4-latin-regular.woff') format('woff'),
       url('space-mono-v4-latin-regular.ttf') format('truetype'),
       url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Space Mono', monospace;
	background: #000;
  background: url(Galaxy.jpg);
  background-size: cover;
}

h2 {
  font-size: 3em;
  margin: 150px 0px 0px 120px;
  padding: 0px 0px 30px;
  color: #fff;
}

p {
	font-size: 1.2em;
	margin: 0px 0px 0px 120px;
	padding: 20px 0px 20px 50px;
	color: #fff;
  text-indent: 50px;
  width: 720px;
  word-wrap: break-word;
  border-left: 4px solid #fff;
}

.first-level {
	font-size: 24px;
	list-style: none;
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: -60px 0px 0px 0px;
	position: sticky;
	top: 10px;
	display: flex;
	justify-content: center;
}

.first-level a {
	text-decoration: none;
	line-height: 60px;
	color: #fff;
}

.first-level li {
	position: relative;
	text-align: center;
	height: 60px;
	width: 200px;
	background: rgba(0,0,0,0.5);
}

.first-level li:hover {
	background-color: teal;
}

.first-level li:hover > ul {
	display: inline;
}

.second-level {
  position: absolute;
	display: none;
  top: 60px;
  left: 0;
  width: 200px;
  list-style: none;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

.second-level li {
	position: relative;
	height: 60px;
	background: rgba(0,0,0,0.6);
}

.second-level li:hover {
	background: teal;
}

.third-level {
  position: absolute;
	display: none;
  top: 0px;
  right: -200px;
	width: 200px;
  list-style: none;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

.third-level li {
	position: relative;
  height: 60px;
  background: rgba(0,0,0,0.6);
}

.third-level li:hover {
	background: teal;
}
<!DOCTYPE html>
<html>
    <head>
        <title>NavigationBar</title>
        <link rel="stylesheet" href="newnavbar.css" type="text/css">
    </head>
  <body>

    <ul class ="first-level">
        <li><a href="#">HOME</a></li>
   	    <li><a href="#">LAB 1-5</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 1</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 2</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 4</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 5</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        </li>
	      <li><a href="#">LAB 6-8</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 6</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 7</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 8</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        <li><a href="#">LAB 9-11</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 9</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 10</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 11</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
            </ul>
        <li><a href="#">LAB 12-14</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 12</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 13</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
                <li><a href ="#">LAB 14</a>
                    <ul class ="third-level">
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                        <li><a href ="#">Content</a></li>
                    </ul>
                </li>
            </ul>
    </ul>

        <h2>CSC 212 - Spring 2019.</h2>
        <p>This site represents work that I have done in support of my
           efforts to learn to program in the CS1 course at SUNY Oswego
           during the Spirng 2019 semester. The materials will be temporally
           organized for the most part. Links to external sites that pertain
           to computer programming, problem solving, Java, Web development,
           and related matters will be placed after the personally created
           artifacts.</p>

  </body>
</html>

关于html - 导航栏内容显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54999167/

上一篇：css - 使用 props 设置 '&:hover' background-color

下一篇：html - 如何调用带有 'name' 标签的 HTML 对象？

相关文章：

javascript - 如何在javascript中为没有单位的svg设置字体大小

html - Chrome、colspan 和边框

php - 在 PHP/CSS 中动态创建的网格仅在 Android Firefox 浏览器中看起来不对？

javascript - Firebug 和不清楚的 div

javascript - 如何从提交的按钮帖子上的 Javascript 返回并访问对象？

php - 自动填充动态生成的表单

javascript - 在其他两个 DIV 之间显示 HTML DIV

html - CSS 背景边距顶部效果

visual-studio - 是否可以将 HTML5 验证添加到 Visual Studio？

javascript - Jquery 和 CSS 按钮切换旋转动画

©2024 IT工具网  联系我们