Име:
Група: Потребител
Ранг: Новопостъпил
Мнения: 5
Регистриран на: 24.11.21
|
ето го html-a
| CODE | <head>
<meta charset="UTF-8">
</head>
<link rel="stylesheet" href="css/site-container.css">
<link rel="stylesheet" href="css/dropdown_menu.css">
<!--<script src="js/dropdown_menu.js"></script>-->
<body>
<div id="site-container">
<nav class="main-nav">
<a href="#">Начало</a>
<a href="#">За Нас</a>
<div class="dropdown" id="products-menu">
<button onclick="toggleDropdown()" class="dropbtn">Стоки</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Нови</a>
<a href="#">Популярни</a>
<div class="dropdown-submenu">
<a href="#">Промоции</a>
<div class="submenu-content">
<a href="#">Летни</a>
<a href="#">Зимни</a>
</div>
</div>
<a href="#">Изчерпани</a>
</div>
</div>
<a href="#">Услуги</a>
<a href="#">Контакти</a>
</nav>
</div>
</div>
</body>
</html>
</div>
и css-a
*, *::before, *::after {
/* --- 2. СТИЛ НА ГЛАВНОТО МЕНЮ (Flexbox) --- */
}
.main-nav {
display: flex; /* Подравнява елементите хоризонтално */
/* цвят Главно меню */
background: #00D9FF;
background: -webkit-linear-gradient(180deg, rgba(0, 217, 255, 1) 0%, rgba(1, 98, 115, 1) 100%);
background: -moz-linear-gradient(180deg, rgba(0, 217, 255, 1) 0%, rgba(1, 98, 115, 1) 100%);
background: linear-gradient(180deg, rgba(0, 217, 255, 1) 0%, rgba(1, 98, 115, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00D9FF", endColorstr="#016273", GradientType=0);
margin-top: 150px; /* Добавя разстояние от горния край на страницата/предходния елемент */
margin-bottom: 20px;
border-radius: 5px;
}
.main-nav a,
.main-nav .dropdown {
flex-grow: 1; /* Разпределя пространството равномерно между 5-те елемента */
text-align: center;
}
.main-nav a,
.dropbtn {
color: #FFFFFF; /* цвят текст Главно меню */
font-weight: bold;
padding: 14px 20px;
text-decoration: none;
font-size: 25px; /* големина текст Главно меню */
border: none;
background-color: transparent; /* Бутонът да е без собствен фон */
cursor: pointer;
display: inline-block;
}
.main-nav a:hover,
.dropbtn:hover {
/* цвят Главно меню задържане на курсора (hover)*/
background: #c2c2c2;
background: -webkit-linear-gradient(180deg,rgba(194, 194, 194, 1) 0%, rgba(69, 69, 69, 0) 100%);
background: -moz-linear-gradient(180deg,rgba(194, 194, 194, 1) 0%, rgba(69, 69, 69, 0) 100%);
background: linear-gradient(180deg,rgba(194, 194, 194, 1) 0%, rgba(69, 69, 69, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr="#C2C2C2",
endColorstr="#454545",
GradientType=0
);
color: #FFDF5E; /* цвят текст Главно меню задържане на курсора (hover)*/
font-size: 23px; /* големина текст Главно меню задържане на курсора (hover)*/
}
/* --- 3. СТИЛОВЕ НА ПАДАЩОТО МЕНЮ (С Анимация) --- */
.dropdown {
/* Запазваме позиционирането */
position: relative;
/* Важно: Променете display: inline-block на display: block или flex,
за да работи по-добре във flex контейнера .main-nav */
display: block;
}
.dropdown-content {
position: absolute;
top: 100%; /* Започва точно под бутона */
left: 0; /* Започва от левия край на бутона */
/* цвят първо подменю */
background: #00D9FF;
background: -webkit-linear-gradient(0deg, rgba(0, 217, 255, 1) 0%, rgba(1, 98, 115, 1) 100%);
background: -moz-linear-gradient(0deg, rgba(0, 217, 255, 1) 0%, rgba(1, 98, 115, 1) 100%);
background: linear-gradient(0deg, rgba(0, 217, 255, 1) 0%, rgba(1, 98, 115, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00D9FF", endColorstr="#016273", GradientType=0);
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
/* ---------------------------------------------------- */
/* Скриване с max-height */
max-height: 0; /* Скрито състояние */
overflow: hidden; /* Скрива съдържанието */
opacity: 0; /* Постепенно изчезване */
/* ---------------------------------------------------- */
/* Анимация за спускане/прибиране */
transition: max-height 0.3s ease-in-out,
opacity 0.3s ease-in-out;
}
/* 3. Състояние при HOVER (ПОКАЗАНО) */
.dropdown:hover .dropdown-content {
/* ---------------------------------------------------- */
/* Показване: Спускане надолу */
max-height: 400px; /* Достатъчно високо, за да се побере съдържанието */
opacity: 1;
overflow: visible;
/* ---------------------------------------------------- */
/* Премахваме предишните transform и visibility правила */
}
.dropdown-content a {
color: #ffffff; /* цвят текст първо подменю */
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 25px; /* големина текст първо подменю */
position: relative;
}
.dropdown-content a:hover {
/* цвят първо подменю задържане на курсора (hover) */
color: #FFDF5E; /* цвят текст първо подменю задържане на курсора (hover) */
font-size: 23px; /* големина текст първо подменю задържане на курсора (hover) */
}
.submenu-content a {
color: #FFFFFF; /* цвят текст второ подменю */
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 25px; /* големина текст второ подменю */
}
.submenu-content a:hover {
/* цвят второ подменю задържане на курсора (hover) */
background: #c2c2c2;
background: -webkit-linear-gradient(180deg,rgba(194, 194, 194, 1) 0%, rgba(69, 69, 69, 0) 100%);
background: -moz-linear-gradient(180deg,rgba(194, 194, 194, 1) 0%, rgba(69, 69, 69, 0) 100%);
background: linear-gradient(180deg,rgba(194, 194, 194, 1) 0%, rgba(69, 69, 69, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr="#C2C2C2",
endColorstr="#454545",
GradientType=0
);
color: #FFDF5E; /* цвят текст втоо подменю задържане на курсора (hover) */
font-size: 23px; /* големина текст второ подменю задържане на курсора (hover) */
}
/* --- 4. СТИЛОВЕ НА ПОДКАТЕГОРИЯ (Без анимация, с :hover) --- */
.dropdown-submenu {
position: relative;
display: block;
}
.submenu-content {
position: absolute;
/* цвят второ подменю */
background: #00D9FF;
background: -webkit-linear-gradient(90deg, rgba(0, 217, 255, 1) 0%, rgba(1, 98, 115, 1) 100%);
background: -moz-linear-gradient(90deg, rgba(0, 217, 255, 1) 0%, rgba(1, 98, 115, 1) 100%);
background: linear-gradient(90deg, rgba(0, 217, 255, 1) 0%, rgba(1, 98, 115, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00D9FF", endColorstr="#016273", GradientType=1);
min-width: 160px;
margin-left: -1px;
top: 0;
left: 100%;
z-index: 20;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transform: translateX(-20px); /* Започва малко скрит наляво */
transition: opacity 0.3s, transform 0.3s, visibility 0s 0.3s;
}
.dropdown-submenu:hover .submenu-content {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition-delay: 0s;
}
.dropdown-submenu:hover > a::after {
/* Ховър ефектът се прилага само за стрелката на директния линк */
color: #FFDF5E; /* Постави цвета, който искаш при ховър */
transform: rotate(90deg); /* Постави анимацията */
}
.dropdown-submenu > a::after {
content: "↓";
width: 14px;
height: 14px;
margin-left: 8px;
font-size: 14px;
vertical-align: middle;
display: inline-block;
color: #000000;
transition: transform 0.3s ease, color 0.3s ease;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-family: Arial, 'Segoe UI Symbol', sans-serif;
}
.dropdown-submenu > a {
/* Наследява общите стилове, но ги подсигурява */
display: block;
position: relative; /* Може да помогне за по-стабилно позициониране на ::after */
padding-right: 30px; /* Добавя разстояние за триъгълника */
text-decoration: none;
}
|
проблема е че трябва в submenu да се показва тази стрелка надолу но не се показва моля за помощ къде е грешката
Това мнение е било редактирано от SuN на 14-10-2025, 10:03
|
помощ за html и css
Помощ 
Търсене 
Потребители 
Календар 
Правила
