Содержимое панели навигации отображается неправильно - PullRequest
Новая
       0

Содержимое панели навигации отображается неправильно

0 голосов
/ 05 марта 2019

Я не уверен, почему я добавил 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 голосов
/ 05 марта 2019

.first-level li:hover > ul используется> вместо .first-level li:hover ul..first-level li:hover ul это выберет все ul внутри .first-level .first-level li:hover > ul выберет все ul элементы, где родительский элемент .first-level

ниже - это ссылка, которая поможет вам понять селекторы 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...