CSS - меню с горизонтальной прокруткой без прокрутки

body {
     margin: 0;
     width: 500px; /* for this example */
}

.menubar {
     background:#000;
     height: 50px;
}

.logo {
     float:left;
     width: 25%;
     color:#fff;
     text-align: center;
}

.flat {
     margin:0;
     padding: 0;
     list-style: none;
}

.menu {
     width: 70%;
     float: right;
     white-space: nowrap;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: -ms-autohiding-scrollbar;
}

.menu::-webkit-scrollbar {
     display: none;
}

.menu li {
     float: left;
     margin-right: 1em;
}

<div class = "menubar">
      <div class = "logo">My Logo</div>
      <div class = "menu">
            <ul class = "flat menu">
                  <li><a href = "">Menu item</a></li>
                  <li><a href = "">Menu item</a></li>
                  <li><a href = "">Menu item</a></li>
                  <li><a href = "">Menu item</a></li>
            </ul>
      </div>
</div>