lacrim

Ваша задача решается отказом от float left в пользу display: inline-block

Вот так например:

ul {
text-align:center;
}
ul li {
display:inline-block;
}

Скрываем стандартный селектор:

-webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none!important;

Ставим свой картинкой на фон:

background: url('/images/arrow.png') no-repeat right center;

Profit!

В исходнике вместо необходимого символа подстваить его html-код вот тут есть всё что вам нужно - htmlweb.ru/html/symbols.php

Например вместо < нужно вписать < Ну и так далее.

Вот есть отличные примеры: https://jsfiddle.net/daviddiasfront/um4xyfoo/

В вашем случае когда нужно только css решение я делаю два меню. Одно прячу на малых разрешениях, второе прячу на больших. Соответственно одно меню статическое, другое разворачивающееся.

С обычным меню я думаю вы и сами разберётесь, а сворачиваемое вот тут например можно повзаимствовать - codepen.io/wesdews/pen/WbOYzM

Например так

Прячем
display: hidden
показываем
display: block

Можно ещё так же с абсолютным позиционированием сделать:

Прячем
position: absolute
margin-left: - 99999
показываем
position: realative
margin-left: 0px