Блог

Главная - Вопросы по программированию - Добавление выпадающей панели навигации 2-го уровня на 1 уровень

Добавление выпадающей панели навигации 2-го уровня на 1 уровень

#html #drop-down-menu #navbar

#HTML #выпадающее меню #панель навигации

Вопрос:

 <nav>
    <ul>
        <li><a href="#">What is it?</a></li>
        <li>
            <a href="#">Inventory</a>
            <ul>
                <li>
                    <a href="#">X-box 360</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decorations</a></li>
                        <li><a href="#">Redstone amp; Transportation</a></li>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Tools, Weapons amp; Armor</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                    </ul>
                </li>
                <li><a href="#">PC</a></li>
                <ul>
                    <li><a href="#">Building Blocks</a></li>
                    <li><a href="#">Decoration Blocks</a></li>
                    <li><a href="#">Redstone</a></li>
                    <li><a href="#">Transportation</a></li>
                    <li><a href="#">Miscellaneous</a></li>
                    <li><a href="#">Foodstuff</a></li>
                    <li><a href="#">Tools</a></li>
                    <li><a href="#">Combat</a></li>
                    <li><a href="#">Brewing</a></li>
                    <li><a href="#">Materials</a></li>
                </ul>
            </li>
            <li><a href="#">Mobile</a></li>
            <ul>
                <li><a href="#">Materials</a></li>
                <li><a href="#">Tools amp; Weapons</a></li>
                <li><a href="#">Decoration Blocks</a></li>
                <li><a href="#">Building Blocks</a></li>
            </ul>
        </li>
        <li><a href="#">PS4</a></li>
        <ul>
            <li><a href="#">Building Blocks</a></li>
            <li><a href="#">Decorations</a></li>
            <li><a href="#">Redstone amp; Transportation</a></li>
            <li><a href="#">Materials</a></li>
            <li><a href="#">Food</a></li>
            <li><a href="#">Tools, Weapons amp; Armor</a></li>
            <li><a href="#">Brewing</a></li>
            <li><a href="#">Miscellaneous</a></li>
        </ul>
    </li>
</nav>

Пока это мой код; он опускается на один уровень, но я попытался добавить второй уровень, выполнив то же самое, что и для первого выпадающего списка, и это не сработает. Это для школьного проекта, и я исследовал, как добавить второй уровень, но пока ничего из того, что я пробовал, не помогло, поэтому, если бы вы, ребята, могли дать мне какой-либо совет или показать мне, где мне нужно что-то добавить, чтобы заставить его работать, мне бы это понравилось. Спасибо!

Комментарии:

1. Вы должны добавить свой код css в.

2. Вы пробовали то же самое? Пожалуйста, опубликуйте это тоже 🙂

3. У меня нет никакого CSS-кода.

4. 1. Добавьте то, что у вас есть в скрипаче, и 2, если возможно, добавьте изображение вашей цели

5. Вы делаете! Видите это «</style>» в верхней части вашего кода? Что перед этим? Кроме того, пожалуйста, добавьте JSfiddle

Ответ №1:

Сначала вам нужно исправить свой html-код, в разметке есть несколько ошибок, можете ли вы проверить, является ли это желаемым меню, обратите внимание в вашем примере кода, что вы закрываете элемент li перед открытием ul для каждого подменю, это ошибка, ul должен быть внутри li, а после ul вы должны закрытьродительский li.

 a {
	color: #FFF;
}


nav {
	margin: 50px 0;
	background-color: #E64A19;
}

nav ul {
	padding: 0;
  margin: 0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
	background-color: #E64A19;
	}

nav a {
	display:block;
	padding:0 10px;	
	color:#FFF;
	font-size:20px;
	line-height: 60px;
	text-decoration:none;
}

nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px; /* the height of the main nav */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}

	
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  '  '; }
li > a:only-child:after { content: ''; }  
 <nav>
    <ul>
        <li><a href="#">What is it?</a></li>
        <li>
            <a href="#">Inventory</a>
            <ul>
                <li>
                    <a href="#">X-box 360</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decorations</a></li>
                        <li><a href="#">Redstone amp;amp; Transportation</a></li>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Tools, Weapons amp;amp; Armor</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">PC</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decoration Blocks</a></li>
                        <li><a href="#">Redstone</a></li>
                        <li><a href="#">Transportation</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                        <li><a href="#">Foodstuff</a></li>
                        <li><a href="#">Tools</a></li>
                        <li><a href="#">Combat</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Materials</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Mobile</a>
                    <ul>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Tools amp;amp;amp; Weapons</a></li>
                        <li><a href="#">Decoration Blocks</a></li>
                        <li><a href="#">Building Blocks</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">PS4</a>
                    <ul>
                        <li><a href="#">Building Blocks</a></li>
                        <li><a href="#">Decorations</a></li>
                        <li><a href="#">Redstone amp;amp; Transportation</a></li>
                        <li><a href="#">Materials</a></li>
                        <li><a href="#">Food</a></li>
                        <li><a href="#">Tools, Weapons amp;amp; Armor</a></li>
                        <li><a href="#">Brewing</a></li>
                        <li><a href="#">Miscellaneous</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Если вам не нужны два первых элемента, вам нужно извлечь из первого ul в отдельный ul.

Для форматирования этого меню вам понадобится часть кода css. можете ли вы просмотреть и пример здесь https://codepen.io/andornagy/pen/xhiJH