0

есть header с nav, где при наведении выпадает список. введите сюда описание изображения Выделил красным блок с подменю, который выходит при наведении на пункты меню. Как расстянуть по всей ширине выпадающий блок? Header по высоте расширяется при наведении на меню.

<body>
<div class="wrap">
    <header class="header">
        <div class="logo">
        </div>

        <nav>
            <ul>
              <li>
                <a href="">Пункт 1</a>
                <ul class="mega-dropdown">
                  <li class="row">
                    <ul class="mega-col">
                        <li><a href="#">Пункт 1</a></li>
                        <li><a href="#">Пункт 2</a></li>
                        <li><a href="#">Пункт 3</a></li>
                        <li><a href="#">Пункт 4</a></li>
                        <li><a href="#">Пункт 4</a></li>
                        <li><a href="#">Пункт 4</a></li>
                        <li><a href="#">Пункт 4</a></li>
                    </ul>
                    
                  </li>
                </ul>        
              </li>
              <li>
                <a href="">Пункт 2</a>
                <ul class="mega-dropdown">
                  <li class="row">
                    <ul class="mega-col">
                      <li><a href="#">Подпункт 1</a></li>
                      <li><a href="#">Подпункт 2</a></li>
                      <li><a href="#">Подпункт 3</a></li>
                      <li><a href="#">Подпункт 4</a></li>
                    </ul>
                  </li>
                </ul>        
              </li>
              <li>
                <a href="">Пункт 3</a>
                <ul class="mega-dropdown">
                  <li class="row">
                    <ul class="mega-col">
                      <li><a href="#">Подпункт 1</a></li>
                      <li><a href="#">Подпункт 2</a></li>
                      <li><a href="#">Подпункт 3</a></li>
                      <li><a href="#">Подпункт 4</a></li>
                    </ul>
                  </li>
                </ul>        
              </li>
              <li>
                <a href="">Пункт 4</a>
                <ul class="mega-dropdown">
                  <li class="row">
                    <ul class="mega-col">
                      <li><a href="#">Подпункт 1</a></li>
                      <li><a href="#">Подпункт 2</a></li>
                      <li><a href="#">Подпункт 3</a></li>
                      <li><a href="#">Подпункт 4</a></li>
                    </ul>
                  </li>
                </ul>        
              </li>
              <li>
                <a href="">Пункт 5</a>
                <ul class="mega-dropdown">
                  <li class="row">
                    <ul class="mega-col">
                      <li><a href="#">Подпункт 1</a></li>
                      <li><a href="#">Подпункт 2</a></li>
                      <li><a href="#">Подпункт 3</a></li>
                      <li><a href="#">Подпункт 4</a></li>
                    </ul>
                  </li>
                </ul>        
              </li>
            </ul>
          </nav>

        
    </header>
</div>
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
 

ul[class],
ol[class] {
  list-style: none;
}
 

a:not([class]) {
  text-decoration-skip-ink: auto;
}
 

img {
  max-width: 100%;
  display: block;
}
 

article > * + * {
  margin-top: 1em;
}
 

input,
button,
textarea,
select {
  font: inherit;
}
 

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.wrap {
    background-color: black;
    width: 100%;
    font-family: 'M PLUS 1p', sans-serif;
    
}

.header {
    font-weight: 500;
    width: 100%;
    min-height: 198px;
    max-height: 288px;
    color: white;
    padding-right: 100px;
    padding-left: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .logo {
        background: url(./img/logo.png);
        width: 42px;
        height: 50px;
        margin-right: 213px;
    }
}



*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none;
    color: #fff
}


nav {
    float: right;
}

nav>ul {
    float: left;
    position: relative
}

nav li {
    list-style: none;
    float: left
}

nav .dropdown {
    position: relative
}

nav li a {
    float: left;
    padding: 35px
}

nav li a:hover {
    background: #2C3E50
}

nav li ul {
    display: none
}

nav li:hover ul {
    width: 100%;
    display: inline;
    background: #000000;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

nav li li {
    float: none
}

nav .dropdown ul {
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    padding: 20px 0;
    border-bottom: 3px solid #34495e
}

nav .dropdown li {
    white-space: nowrap
}

nav .dropdown li a {
    padding: 10px 35px;
    font-size: 13px;
    min-width: 200px
}

nav .mega-dropdown {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    overflow: hidden;
    padding: 20px 35px;
    
}

nav li li a {
    float: none;
    color: #333;
    display: block;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 13px
}

nav li li a:hover {
    background: #bdc3c7;
    background: #FAFBFB
}

.mega-col {
    width: 25%;
    float: left
}

#menu-icon {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -12px;
    margin-right: 30px;
    display: none
}

#menu-icon span {
    border: 2px solid #fff;
    width: 30px;
    margin-bottom: 5px;
    display: block;
    -webkit-transition: all .2s;
    transition: all .1s
}

@media only screen and (max-width: 1170px) {
    nav>ul>li>a {
        padding: 35px 15px
    }
}

@media only screen and (min-width: 960px) {
    nav {
        display: block!important
    }
}

@media only screen and (max-width: 959px) {
    nav {
        display: none;
        width: 100%;
        clear: both;
        float: none;
        max-height: 400px;
        overflow-y: scroll
    }
    #menu-icon {
        display: inline;
        top: 45px;
        cursor: pointer
    }
    #menu-icon.active .first {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        margin-top: 10px
    }
    #menu-icon.active .second {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        position: relative;
        top: -9px;
    }
    #menu-icon.active .third {
        display: none
    }
    .search {
        float: none
    }
    .search input {
        width: 100%
    }
    nav {
        padding: 10px
    }
    nav ul {
        float: none
    }
    nav li {
        float: none
    }
    nav ul li a {
        float: none;
        padding: 8px;
        display: block
    }
    #header nav ul ul {
        display: block;
        position: static;
        background: none;
        border: none;
        padding: 0
    }
    #header nav a {
        color: #fff;
        padding: 8px
    }
    #header nav a:hover {
        background: #fff;
        color: #333;
        border-radius: 3px
    }
    #header nav ul li li a:before {
        content: "- "
    }
    .mega-col {
        width: 100%
    }
}

1 ответ 1

0

я убрал position: relative у родителей dropmenu и добавил position: relative для .header

body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

ul[class],
ol[class] {
    list-style: none;
}

.wrap {
    background-color: black;
    width: 100%;
    font-family: 'M PLUS 1p', sans-serif;
    
}

.header {
    font-weight: 500;
    width: 100%;
    min-height: 198px;
    max-height: 288px;
    color: white;
    padding-right: 100px;
    padding-left: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none;
    color: #fff
}

nav {
    float: right;
}

nav>ul {
    float: left;
}

nav li {
    list-style: none;
    float: left
}

nav .dropdown {
    position: relative
}

nav li a {
    float: left;
    padding: 35px
}

nav li a:hover {
    background: #2C3E50
}

nav li ul {
    display: none
}

nav li:hover ul {
    width: 100%;
    background: #f50;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

nav li li {
    float: none
}

nav .dropdown ul {
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    padding: 20px 0;
    border-bottom: 3px solid #34495e
}

nav .dropdown li {
    white-space: nowrap
}

nav .dropdown li a {
    padding: 10px 35px;
    font-size: 13px;
    min-width: 200px
}

nav .mega-dropdown {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    overflow: hidden;
    padding: 20px 35px;
    
}

nav li li a {
    float: none;
    color: #333;
    display: block;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 13px
}

nav li li a:hover {
    background: #bdc3c7;
    background: #FAFBFB
}

.mega-col {
    width: 25%;
    float: left
}

#menu-icon {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -12px;
    margin-right: 30px;
    display: none
}

#menu-icon span {
    border: 2px solid #fff;
    width: 30px;
    margin-bottom: 5px;
    display: block;
    -webkit-transition: all .2s;
    transition: all .1s
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <title>Document</title>
</head>
<body>
<div class="wrap">
    <header class="header">
        <div class="logo">
        </div>
        
        <nav>
            <ul>
                <li>
                    <a href="">Пункт 1</a>
                    <ul class="mega-dropdown">
                        <li class="row">
                            <ul class="mega-col">
                                <li><a href="#">Пункт 1</a></li>
                                <li><a href="#">Пункт 2</a></li>
                                <li><a href="#">Пункт 3</a></li>
                            </ul>
                        
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">Пункт 2</a>
                    <ul class="mega-dropdown">
                        <li class="row">
                            <ul class="mega-col">
                                <li><a href="#">Подпункт 1</a></li>
                                <li><a href="#">Подпункт 2</a></li>
                                <li><a href="#">Подпункт 3</a></li>
                                <li><a href="#">Подпункт 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    
    
    </header>
</div>
<script src="scripts.js"></script>
</body>
</html>

1
  • Спасибо, сейчас освобожусь, буду тестить. 30 мар 2022 в 17:27

Ваш ответ

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

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