导航栏内容显示不正确

时间：2019-03-05 09:12:46

标签： html css css3

我不确定为什么要在display: none下拉内容中添加.third-level，但是当我将鼠标悬停在第二级内容上并全部显示时，它并没有被隐藏一旦。同样，所有.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>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>

1 个答案:

答案 0 :(得分：2)

if (this.props.language == 'en') { ... } 使用>代替了.first-level li:hover > ul。 .first-level li:hover ul，这将选择.first-level li:hover ul中的所有ul .first-level选择所有.first-level li:hover > ul元素，其中父元素是ul

下面的

链接可帮助您了解css选择器。希望这可以帮助。谢谢。

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

.first-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;
}

相关问题
最新问题