Растянуть блок с position absolute

Question

День добрый Есть вот такая незадача - делаю выпадающее меню. Основная ссылка и подпункты в div с position relative. Подпункты - в div с position absolute Соответственно при hover меняется свойство display у блока с подпунктами. Но вот как то не выходит растянуть при открытом меню блок с подпунктами на все окно - но при этом чтобы подпункты оставались под основным пунктом а не слева - вот собственно что вышло [пример что вышло`

<header>
  <div class='logo'>
    logo
   
  </div>
  <nav class='topMain'>
        <div class='topMenuitem'>
        <a href='#' class='itemMain'><span>Пункт 1</span></a>
            <div class='subItemTop'>
                <a href='/' title='Пункт 1.1'>Пункт 1.1</a>
                <a href='/' title='Пункт 1.2'>Пункт 1.2</a>
                <a href='/' title='Пункт 1.3'>Пункт 1.3</a>
                <a href='/' title='Пункт 1.4'>Пункт 1.4</a>
                <a href='/' title='Пункт 1.5'>Пункт 1.5</a>
                <a href='/' title='Пункт 1.6'>Пункт 1.6</a>
                <a href='/' title='Пункт 1.7'>Пункт 1.7</a>
            </div>
        </div>
            <div class='topMenuitem'>
                <a href='#' class='itemMain'><span>Пункт 2</span></a>
                      <div class='subItemTop'>
                          <a href='/' title='Пункт 2.1'>Пункт 2.1</a>
                          <a href='/' title='Пункт 2.2'>Пункт 2.2</a>
                          <a href='/' title='Пункт 2.3'>Пункт 2.3</a>
                          <a href='/' title='Пункт 2.4'>Пункт 2.4</a>
                          <a href='/' title='Пункт 2.5'>Пункт 2.5</a>
                      </div>
            </div>
        
        <a href='#' class='itemMain'><span>Пункт 3</span></a>
        
        <a href='#' class='itemMain'><span>Пункт 4</span></a>
        <a href='#' class='itemMain'><span>Пункт 5</span></a>
        <a href='#' class='itemMain'><span>Пункт 6</span></a>
            <a href='#' class='itemMain'><span>Пункт 7</span></a>
        </nav>
  
</header>

`] https://codepen.io/vsku/pen/GRoWJyx - хочется бакграунд (красный) растянуть на все окно На js придумаю сам / ищу html / css решение. Спасибо

Answer 1

Один из вариантов Решения такой:

body {
    overflow-x: hidden;
}
header {
  display:flex}
.logo {width:200px}
.topMain {
    display:flex;
    padding: 15px 10px 15px 0;
    align-items:flex-start;
}
.topMain a {
    color: #000;
    font-weight: 700;
    padding: 2px .5vW 0 .5vW;
    display: inline-block;
    z-index: 2;
}
.topMenuitem {
    position:relative;
}
.topMenuitem:after {
    display:block;
    content: ' ';
    border:1px solid greenyellow;
}
.topMenuitem:hover > a,
.topMain a:hover {
    color:#A50034;
}
.topMain a span {
    display:block;
    padding-bottom:10px;
    border-bottom:2px solid transparent;
}

.topMenuitem:hover a span,
.topMain a:hover span {
    border-color:#A50034;
}
.topMenuitem .subItemTop {
    position: absolute;
    display: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    background: #fff;
    top: 30px;
    left: 0;
    right: auto;
    padding: 10px 30px 0 .5vW;
    white-space: nowrap;
    z-index: 1;
    /* background: red; */
}
.topMenuitem .subItemTop:before {
    display:block;
    content: ' ';
    border:1px solid red;
}
/*
.topMenuitem:nth-child(2) .subItemTop {
    padding-left: 370px;
}
.topMenuitem:nth-child(3) .subItemTop {
    padding-left: 510px;
}*/
.topMenuitem .itemMain:hover + .subItemTop,
.topMenuitem .subItemTop:hover{
display:flex;
}


.topMenuitem .subItemTop a {
    display:block;
    padding:0 0 10px 0;
    font-weight: 500;
    color:#333;
}
.topMenuitem .subItemTop a:hover {
    text-decoration:underline;
}

.fullscreensubmenu {
    width: 200vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100vw;
}
.fullscreensubmenu {
    background-color: red;
}

<header>
  <div class='logo'>
    logo

  </div>
  <nav class='topMain'>
    <div class='topMenuitem'>
      <a href='#' class='itemMain'><span>Пункт 1</span></a>
      <div class='subItemTop'>
        <div class='fullscreensubmenu'></div>
        <a href='/' title='Пункт 1.1'>Пункт 1.1</a>
        <a href='/' title='Пункт 1.2'>Пункт 1.2</a>
        <a href='/' title='Пункт 1.3'>Пункт 1.3</a>
        <a href='/' title='Пункт 1.4'>Пункт 1.4</a>
        <a href='/' title='Пункт 1.5'>Пункт 1.5</a>
        <a href='/' title='Пункт 1.6'>Пункт 1.6</a>
        <a href='/' title='Пункт 1.7'>Пункт 1.7</a>
      </div>
    </div>
    <div class='topMenuitem'>
      <a href='#' class='itemMain'><span>Пункт 2</span></a>
      <div class='subItemTop'>
        <div class='fullscreensubmenu'></div>
        <a href='/' title='Пункт 2.1'>Пункт 2.1</a>
        <a href='/' title='Пункт 2.2'>Пункт 2.2</a>
        <a href='/' title='Пункт 2.3'>Пункт 2.3</a>
        <a href='/' title='Пункт 2.4'>Пункт 2.4</a>
        <a href='/' title='Пункт 2.5'>Пункт 2.5</a>
      </div>
    </div>
    <a href='#' class='itemMain'><span>Пункт 3</span></a>
    <a href='#' class='itemMain'><span>Пункт 4</span></a>
    <a href='#' class='itemMain'><span>Пункт 5</span></a>
    <a href='#' class='itemMain'><span>Пункт 6</span></a>
    <a href='#' class='itemMain'><span>Пункт 7</span></a>
  </nav>

</header>

БЛОГ НА HUSL

Растянуть блок с position absolute

Ответы (1 шт):