1

Не могу сделать выпадающее меню, с ютуба, форумов смотрел, коды добавлял, но не получается

Основной туториал

@font-face {
    font-family: "Exo2-Medium";
    src: url("../fonts/Exo2-Medium.ttf");
}
@font-face {
    font-family: "Exo2-MediumItalic";
    src: url("../fonts/Exo2-MediumItalic.ttf");
}
@font-face {
    font-family: "Exo2-Bold";
    src: url("../fonts/Exo2-Bold.ttf");
}
@font-face {
    font-family: "Exo2-BoldItalic";
    src: url("../fonts/Exo2-BoldItalic.ttf");
}
* {
    margin: 0;
    padding: 0;
}
body {
    background-image: url("../img/white-needle.png");
}
#block-body {
    width: 1035px;
    margin: 5px auto;
    height: auto;
}
header {
   width: 1035px; 
   height: 80px;
   background-color: white;
   border-radius: 25px;
    box-shadow: 0px 0px 5px 2px rgba(122,122,122,0.5);
}
<!--#22B14C-->
#block-content {
    width: 1035px;
    height: auto;
    min-height: 500px;
}
.logo {
    width: 200px;
    float: left;
    height: 80px;
}
.logo a {
    display: block;
    margin-left: 30px;
    margin-top: 10px;
    font-family: "Exo2-Bold", sans-serif;
    color:  #b2aeb2;
    text-decoration: none;
    cursor: pointer;
}
.use {
    color: white;
    
}
.web {
    color: #429595;
    background: white;
    padding: 2px; 
}
.logo p {
    margin-left: 20px;
    margin-top: 2px;
    margin-bottom: 5px;
    font-family:  "Exo2-Medium", sans-serif;
    font-size: 13px;
    color: #22B14C;
}
.top-menu {
    width: 685px;
    height: 80px;
    float: left;
}
.top-menu ul li {
    list-style: none;
    float: left;
    text-align: center;
}
.top-menu ul li a {
    display: block;
    width: 171px;
    text-decoration: none;
    font-family:  "ProximaNova",Arial,sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #121313;
    height: 55px;
    padding-top: 25px;
    cursor: pointer;

}
.top-menu ul li a:hover {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    color: white;
    border-radius: 15px;
    background-color: #22B14C;
}
.block-top-auth {
    width: 100px;
    float: left;
    margin-left: 40px;
    height: 80px;
}

.block-top-auth p {
    margin-top: 12px;
    text-align: center;
    margin-bottom: 8px;
    
}
.block-top-auth a {
    text-decoration: none;
    color: #121313;
    font-family:  "Exo2-Medium", sans-serif;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
}
.block-top-auth a:hover {
    transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    color: #124f2e;
}
nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
}
nav ul li:hover > ul {
    display:inherit;
}
nav ul ul li {
    min-width:170px;
    float:none;
    display:list-item;
    position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Шапка для сайта</title>
</head>
<body>
 
    <div id="block-body">

     <header>

     <!--// разметка для логотипа -->

       <div class="logo">
        <a href="index.html"><img src="images/logo.png" alt="" />
          <!-- <span class="use">Вкус</span><span class="web">Няшка</span>-->
        </a>   
       <p>Онлайн магазин продуктов</p>    
       </div>  

       <!--// разметка для нашего меню -->

       <nav class="top-menu">
         <ul>
             <li><a href="#" class="submenu-link">Каталог</a></li>
              <ul>
                  <li><a href="#">fdfd</a></li>
                  <li><a href="#">fdddsf</a></li>
                  <li><a href="#">fdfddsd</a></li>
                  <li><a href="#">fdfdd</a></li>
                  <li><a href="#">fdfdsd</a></li>
                </ul>
              </li>
             <li><a href="#">Контакты</a></li>
             <li><a href="#">Обратная связь</a></li>
             <li><a href="#">Корзина</a></li>
        </ul>
      </nav> 

       <!--// блок с авторизацией -->

       <div class="block-top-auth">
         <p><a href="#">Вход</a></p>  
         <p><a href="#">Регистрация</a></p>  
       </div>  
         
     </header>

      <div id="block-content"></div>  
        
    </div>   
</body>
</html>

4
  • 1
    На вашем месте я бы добавил ссылки на ютуб-туториалы/форумы, по которым Вы пытались написать данный код. Ссылка делается так: [текст](ссылка)
    – Agzam
    22 дек 2021 в 19:28
  • html5css.ru/edithtm/index.php
    – Andrey
    22 дек 2021 в 19:39
  • Ссылка пустая, для того, что бы редактировать вопрос есть кнопка Править
    – Agzam
    22 дек 2021 в 19:53
  • html5css.ru/howto/howto_css_dropdown.php
    – Andrey
    22 дек 2021 в 20:05

1 ответ 1

0

Добавил меню у "Каталог"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Шапка для сайта</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
   @font-face {
font-family: "Exo2-Medium";
src: url("../fonts/Exo2-Medium.ttf");
}
@font-face {
font-family: "Exo2-MediumItalic";
src: url("../fonts/Exo2-MediumItalic.ttf");
}
@font-face {
font-family: "Exo2-Bold";
src: url("../fonts/Exo2-Bold.ttf");
}
@font-face {
font-family: "Exo2-BoldItalic";
src: url("../fonts/Exo2-BoldItalic.ttf");
}
* {
margin: 0;
padding: 0;
}
body {
background-image: url("../img/white-needle.png");
}
#block-body {
width: 1035px;
margin: 5px auto;
height: auto;
}
header {
   width: 1035px; 
   height: 80px;
   background-color: white;
   border-radius: 25px;
box-shadow: 0px 0px 5px 2px rgba(122,122,122,0.5);
}
<!--#22B14C-->
#block-content {
width: 1035px;
height: auto;
min-height: 500px;
}
.logo {
width: 200px;
float: left;
height: 80px;
}
.logo a {
display: block;
margin-left: 30px;
margin-top: 10px;
font-family: "Exo2-Bold", sans-serif;
color:  #b2aeb2;
text-decoration: none;
cursor: pointer;
}
.use {
color: white;

}
.web {
color: #429595;
background: white;
padding: 2px; 
}
.logo p {
margin-left: 20px;
margin-top: 2px;
margin-bottom: 5px;
font-family:  "Exo2-Medium", sans-serif;
font-size: 13px;
color: #22B14C;
}
.top-menu {
width: 685px;
height: 80px;
float: left;
}
.top-menu ul li {
list-style: none;
float: left;
text-align: center;
}
.top-menu ul li a {
display: block;
width: 171px;
text-decoration: none;
font-family:  "ProximaNova",Arial,sans-serif;
font-size: 16px;
font-weight: 600;
color: #121313;
height: 55px;
padding-top: 25px;
cursor: pointer;

}
.top-menu ul li a:hover{
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
color: white;
border-radius: 15px;
background-color: #22B14C;
}
.block-top-auth {
width: 100px;
float: left;
margin-left: 40px;
height: 80px;
}

.block-top-auth p {
margin-top: 12px;
text-align: center;
margin-bottom: 8px;

}
.block-top-auth a {
text-decoration: none;
color: #121313;
font-family:  "Exo2-Medium", sans-serif;
font-size: 15px;
text-decoration: underline;
cursor: pointer;
}
.block-top-auth a:hover {
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
color: #124f2e;
}
nav ul ul .submenu-link{
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li .submenu-link{
min-width:170px;
float:none;
display:list-item;
position: relative;
}


/* Стили меню */ 
.submenu-link {
display: block;
width: 171px;
background-color: #FFF;
text-decoration: none;
font-family: "ProximaNova",Arial,sans-serif;
font-size: 16px;
font-weight: 600;
color: #121313;
height: 80px;
padding-top: 25px;
padding-bottom: 25px;
cursor: pointer;
border: none;
}   

.submenu-link:hover {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
color: white;
border-radius: 15px;
background-color: #22B14C;
}

.dropdown {
position: relative;
display: inline-block;
}

.submenu-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.submenu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

a:hover {background-color: #f1f1f1;}
.dropdown:hover .submenu-content {display: block;}
/*.dropdown:hover .submenu-link {background-color: #3e8e41;}*/
</style>
</head>
<body>
<div id="block-body">
<header>
<!--// разметка для логотипа -->
<div class="logo">
    <a href="index.html"><img src="images/logo.png" alt="" /></a>   
    <p>Онлайн магазин продуктов</p>    
</div>  
<!--// разметка для нашего меню -->

   <nav class="top-menu">
    <ul>
        <div class="dropdown">
        <button class="submenu-link">Каталог</button>
            <div class="submenu-content">
                <a href="#">fdfd</a></li>
                <a href="#">fdddsf</a></li>
                <a href="#">fdfddsd</a></li>
                <a href="#">fdfdd</a></li>
                <a href="#">fdfdsd</a></li>
            </div>
        </div>
         <li><a href="#">Контакты</a></li>
         <li><a href="#">Обратная связь</a></li>
         <li><a href="#">Корзина</a></li>
    </ul>
  </nav> 

   <!--// блок с авторизацией -->

   <div class="block-top-auth">
     <p><a href="#">Вход</a></p>  
     <p><a href="#">Регистрация</a></p>  
   </div>  
     
 </header>

  <div id="block-content"></div>  
    
</div>   
</body>
</html>

2
  • 1
    Спасибо!!!!!!!!
    – Andrey
    22 дек 2021 в 21:08
  • 1
    Если ответ вам помог, нажмите галочку слева
    – Summersby
    23 дек 2021 в 5:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.