Dropdown menu with two columns?

Question

Talk guys. I’m breaking my head here because I want to leave the dropdown menu with two columns and ta bugando.

CSS

  /* Navigation */

.menuheadx{position:Fixed;width:100%;margin:auto;top:0;right:0;left:0;opacity:1;z-index:999;-Webkit-Transform:translateZ(0);Transform:translateZ(0);background:linear-gradient(180deg,#0b0d11 0,rgba(0,0,9));color:#fff;Transition:Transform . 3s;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);Transition:background-color . 25s linear} .logo{position:relative;padding:7px 0;color:#fff;float:left;z-index:123}. logo a{color:#fff}#menuhead Nav{position:relative;width:100%;max-width:990px;margin:0 auto} #csxmenus,#csxmenus ul,#csxmenus ul li,#csxmenus ul li a,#csxmenus #head-mobile{border:0;list-style:none;line-height:1;margin:0 auto;display:block;position:relative}#csxmenus{width:100%;max-width:990px}#csxmenus:after,#csxmenus > ul:after{content:"." ;display:block;clear:Both;visibility:Hidden;line-height:0;height:0}#csxmenus #head-mobile{display:None}#csxmenus > ul > li{float:left}#csxmenus > ul > li > a{padding:20px 10px;font-size:14px;font-Weight:500;Letter-Spacing:1px;text-Decoration:None;color:#fff}#csxmenus > ul > li > a::before{background:#1277cb;content:';display:block;position:Absolute;left:100%;right:100%;bottom:0;height:1px;Transition:all . 3s ease-in-out}#csxmenus > ul > li > a:hover:before,#csxmenus > ul > li:hover > a:before{left:10px;right:10px}#csxmenus > ul > li:hover > a,#csxmenus ul li.active a{color:#fff}#csxmenus > ul > li:hover,#csxmenus ul li.active:hover,#csxmenus ul li.active,#csxmenus ul li.has-sub.active:Hover{Transition:background . 3s Ease}#csxmenus ul{background:linear-gradient(180deg,#0b0d11 0,rgba(0,0,0,9));position:Absolute;opacity:0;visibility:Hidden;z-index:99;box-shadow:0 2px 2.2rem -1rem rgba(0,0,0,0.1);Transition:all . 4s Cubic-Bezier(.47,1.64,.41,.8);border-Radius:8px;top:100%;Transform:Scale(0.9);Transform-style:preserve-3d;Backface-visibility:Hidden}#csxmenus ul ul li{Transition:all . 25s Ease}#csxmenus ul ul li:Hover{}#csxmenus li:Hover > ul{opacity:1;visibility:Visible;Transform:Scale(1.0)}#csxmenus li:Hover > ul >li{}#csxmenus ul ul ul{margin-left:100%;top:0}#csxmenus ul ul li a{border-bottom:1px Solid rgba(0,0,0,0.03);padding:8px 15px;width:170px;font-size:13px;text-Decoration:None;color:#fff;font-Weight:400}#csxmenus ul ul li:last-Child >a,#csxmenus ul ul li.last-item >a border-bottom:0}#csxmenus ul ul li:Hover >a,#csxmenus ul ul li a:Hover{left:3px;}#csxmenus ul ul li.has-sub:Hover,#csxmenus ul li.has-sub ul li.has-sub ul li:Hover{}#csxmenus ul ul ul li.active a{border-left:1px Solid #333}#csxmenus >ul >li.has-sub >ul >li.active >a,#csxmenus > ul ul > li.has-sub > ul > li.active > a{border-top:1px Solid rgba(0,0,0.03)}#csxmenus > ul > li.has-sub >a i {margin:0 0 0 5px}#csxmenus > ul ul> li.has-sub >a i{margin:0 0 0 5px;float:right;Transform:Rotate(-90deg)}#csxmenus . notif-code{display:inline-block;font-size:18px;float:right;position:Absolute;right:50px;top:19px;z-index:99}#csxmenus . notif-code a{position:relative;color:#fff}#csxmenus . notif-show . sindicat{display:block;font-size:16px;background:#1277cb;position:Absolute;top:0;right:0;width:10px;height:10px;border-Radius:8px}. sindicat{Animation:sindicat 1s Ease Infinite}#csxmenus > ul > li > a.thisar{position:relative}#csxmenus > ul > li > a.thisar:after{content:'Ad';position:Absolute;right:-3px;top:4px;background:#568af5;color:#fff;font-size:10px;padding:2px 5px;border-Radius:3px}#csxmenus > ul > li:Hover > a.thisar:after{Animation:Rubberband 1.2s Ease}. Night #csxmenus > ul > li > a.thisar:after{background:#ff9f43;color:#fff}#csxmenus ul ul li a:before{content:' f114';font-family:fontawesome;margin:0 8px 0 0}#csxmenus ul ul li:Hover a:before{content:' f115';margin:0 6px 0 0 0}

HTML

<ul>
  <li><a href='#' itemprop='url'><span itemprop='name'>LANÇAMENTOS</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>SÉRIES</span></a></li>
 
  <li>
     <a href='#' itemprop='url'><span itemprop='name'>GÊNEROS <i aria-hidden='true' class='fa fa-angle-down'/></span></a>
     <ul>
        <li><a href='#' itemprop='url'><span itemprop='name'>Ação</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Animação</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Aventura</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Comédia</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Crime</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Documentário</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Drama</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Fantasia</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Faroeste</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Ficção-Científica</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Guerra</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Musical</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Policial</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Romance</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Suspense</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Terror</span></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Thriller</span></a></li>
       
     </ul>
  </li>
       <li><a href='#' itemprop='url'><span itemprop='name'>TOP IMDB</span></a></li>
       <li><a href='#' itemprop='url'><span itemprop='name'>AJUDA</span></a></li>

Answer 1

There’s no way to see the problem there, but a workable solution might be you leave this menu :hover with a hammered width, for example 300px and also display: flex; flex-wrap: wrap and put each menu item with width: 150px, so it would take two lines and break automatically.

#menu {
        display: flex;
        flex-wrap: wrap;
        width: 320px;
        padding: 10px;
    }

    #menu .item {
        width: 150px;
        background-color: #777;
        padding: 5px;
    }

<li>
        <a id="btn">
            Seu item
            <div id="menu">
                <a href="" class="item">item 1</a>
                <a href="" class="item">item 2</a>
                <a href="" class="item">item 3</a>
                <a href="" class="item">item 4</a>
            </div>
        </a>
    </li>