BG Development Форуми -> Помощ за html css

BG Development · За реклама · За контакти

Помощ

Търсене

Потребители

Календар

Правила

Здравей! ( Включване | Регистриране )

BG Development Форуми -> Програмиране -> HTML/CSS/JavaScript/VBScript

Помощ за html css, добавяне на sub menu

Абонирай се за темата | Изпрати адреса на темата на приятел | Принтирай темата

andonovhp	Публикувано на: 11-04-2023, 20:47
Име: Група: Потребител Ранг: Новопостъпил Мнения: 4 Регистриран на: 24.11.21	Здравейте. Имам структура на падащо меню която горе долу е следната <li class="menu-item"><a href="index.html">НАЧАЛО</a></li> <li class="menu-item"><a href="aboutus.html">ЗА НАС</a></li> <li class="menu-item"><a href="#0">ПРОДУКТИ</a> <ol class="sub-menu"> <li class="menu-item"><a href="#0">МЕТАЛНИ КАРТИНИ</a></li> <li class="menu-item"><a href="#0">МУЗИКАЛНИ</a></li> <li class="menu-item"><a href="#0">МОТИВИРАЩИ</a></li> <li class="menu-item"><a href="#0">АБСТРАКТНИ</a></li> <li class="menu-item"><a href="#0">КАРТИ</a></li> <li class="menu-item"><a href="#0">ЦВЕТЯ</a></li> <li class="menu-item"><a href="#0">ЖИВОТНИ</a></li> <li class="menu-item"><a href="#0">МЕТАЛНИ ПАНА</a></li> </ol> <li class="menu-item"><a href="gallery.html">ГАЛЕРИЯ</a></li> <li class="menu-item"><a href="contactus.html">КОНТАКТИ</a></li> Въпроса ми е следния. Как да добавя в подменюто меню също предполагам и към css-а трябва да добавя нещо. Благодаря предварителни

devil

Публикувано на: 12-04-2023, 10:08

Име: Ангелов
Група: Потребител
Ранг: Почетен член

Мнения: 1505
Регистриран на: 17.05.04

Ам, при наличие на ChatGPT да питаш във форум, за такъв сравнително прост въпрос...не знам какво да кажа.

HTML:

CODE

<nav>
<ul>
<li><a href="#">Level 1 Item 1</a>
<ul>
<li><a href="#">Level 2 Item 1</a>
<ul>
<li><a href="#">Level 3 Item 1</a></li>
<li><a href="#">Level 3 Item 2</a></li>
<li><a href="#">Level 3 Item 3</a></li>
</ul>
</li>
<li><a href="#">Level 2 Item 2</a></li>
<li><a href="#">Level 2 Item 3</a></li>
</ul>
</li>
<li><a href="#">Level 1 Item 2</a></li>
<li><a href="#">Level 1 Item 3</a>
<ul>
<li><a href="#">Level 2 Item 4</a></li>
<li><a href="#">Level 2 Item 5</a>
<ul>
<li><a href="#">Level 3 Item 4</a></li>
<li><a href="#">Level 3 Item 5</a></li>
<li><a href="#">Level 3 Item 6</a></li>
</ul>
</li>
<li><a href="#">Level 2 Item 6</a></li>
</ul>
</li>
</ul>
</nav>

CSS:

CODE

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline-block;
position: relative;
}

nav ul li a {
display: block;
padding: 10px;
color: #000;
text-decoration: none;
}

nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 0;
}

nav ul li:hover ul {
display: block;
}

nav ul li ul li {
display: block;
width: 100%;
}

nav ul li ul li a {
padding: 8px 10px;
color: #000;
text-decoration: none;
}

nav ul li ul li ul {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: #fff;
padding: 0;
}

nav ul li ul li:hover ul {
display: block;
}

--------------------

Поезия за душата | Специализиран неврологичен кабинет