Imported menu for the site ... but in the layout looks like this:

enter image description here

and it turned out like this:

enter image description here

Is there a way to fill the background without changing the structure of html?

* { margin: 0; padding: 0; list-style: none; text-decoration: none; } ul { display: flex; justify-content: space-around; width: 600px; } ul:first-child { padding: 10px 0; background: lightblue; } ul:first-child li { position: relative; } ul>li>ul { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; width: 250px; height: 140px; background: #fbfbfb; padding: 10px; margin-top: 10px; visibility: hidden; transition: all .7s linear .5s; opacity: 0; } ul>li>ul li { padding: 4px 0; } ul>li>ul li a { font-size: 14px; } ul li:hover ul { visibility: visible; opacity: 1; } 
 <ul> <li><a href="">Пункт 1</a></li> <li><a href="">Пункт 2</a></li> <li><a href="">Пункт 3</a> <ul> <li><a href="">Пункт 3-1</a></li> <li><a href="">Пункт 3-2</a></li> <li><a href="">Пункт 3-3</a></li> <li><a href="">Пункт 3-4</a></li> <li><a href="">Пункт 3-5</a></li> <li><a href="">Пункт 3-6</a></li> <li><a href="">Пункт 3-7</a></li> <li><a href="">Пункт 3-8</a></li> <li><a href="">Пункт 3-9</a></li> <li><a href="">Пункт 3-10</a></li> <li><a href="">Пункт 3-11</a></li> <li><a href="">Пункт 3-12</a></li> </ul> </li> <li><a href="">Пункт 4</a></li> <li><a href="">Пункт 5</a></li> </ul>

  • And you basically can not change the layout? - ishidex2
  • the customer is a master ... it is said so it means so ... I cannot change html ... I know it stupidly but ... - user33274
  • So crutches are born. hhhhhhh, can I ask classes? - ishidex2
  • @Duoxx think yes ... it was not mentioned at least ... - user33274

2 answers 2

Here is my version here the list has a brown background, but the first 5 elements have a white background

 * { margin: 0; padding: 0; list-style: none; text-decoration: none; } ul { display: flex; justify-content: space-around; width: 600px; } ul:first-child { padding: 10px 0; background: lightblue; } ul:first-child li { position: relative; } ul>li>ul { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; width: 250px; max-height: 140px; background: #BCBC9C; margin-top: 10px; visibility: hidden; transition: all .7s linear .5s; opacity: 0; } ul>li>ul li { padding: 4px; } ul>li>ul li a { font-size: 14px; } ul>li>ul>li:nth-child(-n+5) { background:#fff; } ul>li>ul>li:nth-child(1n+6) a{ color:#fff; } ul li:hover ul { visibility: visible; opacity: 1; } 
 <ul> <li><a href="">Пункт 1</a></li> <li><a href="">Пункт 2</a></li> <li><a href="">Пункт 3</a> <ul> <li><a href="">Пункт 3-1</a></li> <li><a href="">Пункт 3-2</a></li> <li><a href="">Пункт 3-3</a></li> <li><a href="">Пункт 3-4</a></li> <li><a href="">Пункт 3-5</a></li> <li><a href="">Пункт 3-6</a></li> <li><a href="">Пункт 3-7</a></li> <li><a href="">Пункт 3-8</a></li> <li><a href="">Пункт 3-9</a></li> <li><a href="">Пункт 3-10</a></li> <li><a href="">Пункт 3-11</a></li> <li><a href="">Пункт 3-12</a></li> </ul> </li> <li><a href="">Пункт 4</a></li> <li><a href="">Пункт 5</a></li> </ul>

  • I understand the background is not ul and li? - user33274
  • The list has a brown background, but the first 5 elements have a white background - ishidex2

Invented a super clumsy method, but I’m waiting for a good example better than mine:

 * { margin: 0; padding: 0; list-style: none; text-decoration: none; } ul { display: flex; justify-content: space-around; width: 600px; } ul:first-child { padding: 10px 0; background: lightblue; } ul:first-child li { position: relative; } ul>li>ul { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; width: 250px; height: 140px; background: #fbfbfb; padding: 10px; margin-top: 10px; visibility: hidden; transition: all .7s linear .5s; opacity: 0; } ul>li>ul li { padding: 4px 0; position: relative; z-index: 100; } ul>li>ul li a { font-size: 14px; } ul li:hover ul { visibility: visible; opacity: 1; } ul>li>ul:after { content: ""; display: block; width: 190px; height: 160px; background:#BCBC9C; position: absolute; top: 0; right: 0; z-index: 0; } ul>li>ul li:not(.elem) a { color: #fbfbfb; } 
 <ul> <li><a href="">Пункт 1</a></li> <li><a href="">Пункт 2</a></li> <li><a href="">Пункт 3</a> <ul> <li class="elem"><a href="">Пункт 3-1</a></li> <li class="elem"><a href="">Пункт 3-2</a></li> <li class="elem"><a href="">Пункт 3-3</a></li> <li class="elem"><a href="">Пункт 3-4</a></li> <li class="elem"><a href="">Пункт 3-5</a></li> <li><a href="">Пункт 3-6</a></li> <li><a href="">Пункт 3-7</a></li> <li><a href="">Пункт 3-8</a></li> <li><a href="">Пункт 3-9</a></li> <li><a href="">Пункт 3-10</a></li> <li><a href="">Пункт 3-11</a></li> <li><a href="">Пункт 3-12</a></li> </ul> </li> <li><a href="">Пункт 4</a></li> <li><a href="">Пункт 5</a></li> </ul>