Почему navbar удвоился после использования "repeat" в CSS?

Я хотел создать навигационную панель на моем веб-сайте с фоном, повторяющим оранжевый блок изображения. Вот изображение. Тем не менее, окончательный результат показывает двойную панель навигации, как показано здесь. Он остается удвоенным даже после изменения атрибута "repeat" в css. Как мне сделать только один слой вместо дублирования?

Вот мой код CSS:

#cssmenu{
      border-style: initial;
    border-color: initial;
    border-width: 0px;
    margin: 0px;
     padding:0px;
        border-image-source:initial;
        border-image-slice:initial;
        border-image-width:initial;
        border-image-outset:initial;
        border-image-repeat:initial;        list-style-type:none;
        list-style-position:initial;
        list-style-image: initial;        line-height:1;
        display:block;
        position:relative;
        box-sizing: border-box;        background-image: url('../../SiteAssets/o.png');
        background-repeat:repeat;
        background-repeat-x:repeat;
        background-repeat-y:repeat;
        z-index:2;    }    #cssmenu:after{    content:".";
    z-index:2;
    display:block;
    clear:both;
    visibility:hidden;
    line-height:0;
    height:0;}

и мой HTML-код:

<div id="cssmenu" style="left:0px; top:0px" >
        <ul>
           <li>
              <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
               <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
                <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
                <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>
           <li>
                <!--main-->
             <ul><!--dropdownlist--></ul>
           </li>        </ul>        </div>