列数和分页符

时间:2018-11-22 10:17:36

标签: html css css3 css-multicolumn-layout

目前,我正在使用新菜单(单击左上角徽标下方的“程序”下的开发程序)(http://52.57.22.230/)进行操作。

Chrome的行为不同于其他浏览器。我使用column-count: 5来设置此大小,并将break-inside: avoid;设置为5列,但从一个主题开始。 Edge,Firefox的行为就像我希望的那样,Chrome仅显示3列。 chrome符合break-inside: avoid;所说的,但我希望在所有浏览器中都具有与Firefox相同的行为。

菜单的html:

<div class="overlay" style="display: block;">
    <div class="wrap">
        <div class="btn-close"></div>
        <ul class="wrap-nav">
                        <div class="columnbreak">

                <h3>
                    Rundreisen                </h3>
                <hr>
                                    <ul>
                        <li><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
                    </ul>
                                        <h5>afrika</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
                                            </ul>
                                        <h5>asien</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
                                            </ul>
                                        <h5>ozeanien</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
                                            </ul>
                                                </div>
                        <div class="columnbreak" style="">

                <h3>
                    Freiwilligenarbeit                </h3>
                <hr>
                                    <ul>
                        <li><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
                    </ul>
                                        <h5>afrika</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
                                            </ul>
                                        <h5>asien</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
                                            </ul>
                                        <h5>europa</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
                                            </ul>
                                        <h5>karibik</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
                                            </ul>
                                        <h5>lateinamerika</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
                                            </ul>
                                        <h5>nordamerika</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
                                            </ul>
                                        <h5>ozeanien</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
                                            </ul>
                                                </div>
                        <div class="columnbreak">

                <h3>
                    Farmarbeit                </h3>
                <hr>
                                    <ul>
                        <li><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
                    </ul>
                                        <h5>afrika</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
                                            </ul>
                                        <h5>europa</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
                                            </ul>
                                        <h5>lateinamerika</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
                                            </ul>
                                        <h5>nordamerika</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
                                            </ul>
                                        <h5>ozeanien</h5>
                    <ul>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
                                            </ul>
                                                </div>
                    </ul>
        <div class="socialmenu">
            <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
            <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
        </div>
    </div>
</div>

css:

.wrap-nav h3 a {color: #fff!important;}

/*overlay*/

.overlay {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: #cb0000;
    opacity: 0.95;
    overflow: auto;
    z-index: 1000001;
}
.wrap {
    color: #fff;
    /* text-align:center; */
    max-width: 90%;
    margin: 0 auto;
}
.columnbreak {
    break-inside: avoid;
}

.wrap h3 { font-size: 20px; color: #fff; text-transform: uppercase }
.wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
.wrap hr {
    border: dashed #fff;
    border-width: 1px 0 0;
    clear: both;
    margin: 10px 0 10px;
    height: 0;
}
.wrap ul {
    margin: 0;
}
/*.wrap ul li {
    margin-bottom: 0.3rem;
}*/
.wrap ul.wrap-nav {
    border-bottom: 1px dashed #fff;
    padding: 3rem 0 1rem;
    column-count: 5;
}
.wrap-nav h2 {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
    font-size: 2.1rem;
    font-weight: bold;
}
.breiter {
    width: 40%!important;
}
.wrap ul.wrap-nav li {
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
    width: 18%;
    position: relative;
}
.wrap ul.wrap-nav li a {
    color: #fff;
    display: block;
    padding: 2px 0;
    text-decoration: none;
    transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
    color: #fff;
}
.wrap ul.wrap-nav ul {
    padding: .8rem 0;
    /* border-bottom: 1px dashed #fff;
    /* margin-bottom: 1.5rem; */
}
.wrap ul.wrap-nav ul li {
    display: block;
    font-size: 13px;
    width: 77%;
    color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
    color: #fff;
}
.wrap ul.wrap-nav ul li a:hover {
    color: #fff;
    background: none;
    text-decoration: underline;
}
.socialmenu {
    text-align: center!important;
    padding: 2rem 0!important;
}
.socialmenu .button {
    color: #fff;
    border: 1px solid #fff!important;
}
.socialmenu .button:hover {
    color: #cb0000!important;
    background-color: #fff;
}
@media screen and (max-width:48em) {
    .wrap ul.wrap-nav>li {
        width: 100%;
        padding: 20px 0;
        border-bottom: 1px dashed #fff;
    }
    .wrap ul.wrap-nav {
        padding: 30px 0 0;
    }
    .wrap ul h3,
    .wrap ul h5 {
        color: #fff;
    }
    .content h3, h4, h5 {
        color: #00a4e9;
    }
    h3.ui-accordion-header {
        color: #fff;
    }
}

有什么建议吗?预先感谢!

屏幕截图: five columns

with chrome/blink

1 个答案:

答案 0 :(得分:0)

好吧,事实证明列数不是正确的解决方案。使用flex-box,效果比预期好得多。

<div class="overlay" style="display: block;">
    <div class="wrap">
        <div class="btn-close"></div>
        <ul class="wrap-nav">
                        <div class="columnbreak">
                <h3>
                    Rundreisen                </h3>
                <ul class="test02">
                    <li class="test01"><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
                </ul>
                <div class="columnbreak-inner">


                    <ul>
                    <h5>afrika</h5>
                                                <li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
                                            </ul>


                    <ul>
                    <h5>asien</h5>
                                                <li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
                                            </ul>


                    <ul>
                    <h5>ozeanien</h5>
                                                <li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
                                            </ul>

                                        </div>
                            </div>
                        <div class="columnbreak">
                <h3>
                    Freiwilligenarbeit                </h3>
                <ul class="test02">
                    <li class="test01"><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
                </ul>
                <div class="columnbreak-inner">


                    <ul>
                    <h5>afrika</h5>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
                                            </ul>


                    <ul>
                    <h5>asien</h5>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
                                            </ul>


                    <ul>
                    <h5>europa</h5>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
                                            </ul>


                    <ul>
                    <h5>karibik</h5>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
                                            </ul>


                    <ul>
                    <h5>lateinamerika</h5>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
                                            </ul>


                    <ul>
                    <h5>nordamerika</h5>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
                                            </ul>


                    <ul>
                    <h5>ozeanien</h5>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
                                                <li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
                                            </ul>

                                        </div>
                            </div>
                        <div class="columnbreak">
                <h3>
                    Farmarbeit                </h3>
                <ul class="test02">
                    <li class="test01"><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
                </ul>
                <div class="columnbreak-inner">


                    <ul>
                    <h5>afrika</h5>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
                                            </ul>


                    <ul>
                    <h5>europa</h5>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
                                            </ul>


                    <ul>
                    <h5>lateinamerika</h5>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
                                            </ul>


                    <ul>
                    <h5>nordamerika</h5>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
                                            </ul>


                    <ul>
                    <h5>ozeanien</h5>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
                                                <li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
                                            </ul>

                                        </div>
                            </div>
                    </ul>
        <div class="socialmenu">
            <a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
            <a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
        </div>
    </div>
</div>

和CSS:

.wrap-nav h3 a {color: #fff!important;}

/*overlay*/

.overlay {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background: #cb0000;
    opacity: 0.95;
    overflow: auto;
    z-index: 1000001;
}
.wrap {
    color: #fff;
    /* text-align:center; */
    max-width: 90%;
    margin: 0 auto;
}
.columnbreak {
    /* break-inside: avoid; */
    flex-basis: 33%;
    margin: 0 .5rem;
}
.columnbreak-inner {
    display: flex;
    flex-wrap: wrap;
}

.wrap h3 { font-size: 20px; color: #cb0000; text-transform: uppercase; background-color: #fff; }
.wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
.wrap hr {
    border: dashed #fff;
    border-width: 1px 0 0;
    clear: both;
    margin: 10px 0 10px;
    height: 0;
}
.wrap ul {
    margin: 0;
}
/*.wrap ul li {
    margin-bottom: 0.3rem;
}*/
.wrap ul.wrap-nav {
    border-bottom: 1px dashed #fff;
    padding: 3rem 0 1rem;
    /* column-count: 5; */
    display: flex;
}
.wrap-nav h2 {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
    font-size: 2.1rem;
    font-weight: bold;
}
.breiter {
    width: 40%!important;
}
.wrap ul.wrap-nav li {
    font-size: 20px;
    display: inline-block;
    vertical-align: top;
    width: 18%;
    position: relative;
}
.wrap ul.wrap-nav li a {
    color: #fff;
    display: block;
    padding: 2px 0;
    text-decoration: none;
    transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -webkit-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
    color: #fff;
}
.wrap ul.wrap-nav ul {
    padding: .8rem 0;
    /* border-bottom: 1px dashed #fff;
    /* margin-bottom: 1.5rem; */
    flex-basis: 50%
}
.wrap ul.wrap-nav ul li {
    display: block;
    font-size: 13px;
    width: 77%;
    color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
    color: #fff;
}
.wrap ul.wrap-nav ul li a:hover {
    color: #fff;
    background: none;
    text-decoration: underline;
}
.socialmenu {
    text-align: center!important;
    padding: 2rem 0!important;
}
.socialmenu .button {
    color: #fff;
    border: 1px solid #fff!important;
}
.socialmenu .button:hover {
    color: #cb0000!important;
    background-color: #fff;
}