HTML和CSS：带列表旋转的水平导航菜单（DIVI主题）

Question

我需要像这样的导航设计

但我所做的就是这样

我无法弄清楚CSS解决方案。

修改：顺便说一下，我使用了divi主题 这是我对css的修改

/*------------------------------ Navigation ------------------------------*/
#main-header {
  -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
}

#et-top-navigation ul.nav {
  font-family: Sintony-Bold, Arial, sans-serif;
}
/*** Here is the rotation of the list items vertically ***/
#et-top-navigation ul.nav li {
  text-align: right !important; /* this make the bullets to the right */
  -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    list-style-position: inside !important;
}
/*** Adding of bullets to li items ***/
#et-top-navigation ul.nav li:hover::before {
  content: '•';
  color: #fff;
}
#et-top-navigation ul.nav li.current_page_item::before {
  content: '•';
  color: #fff;
  /*font-size: 130%;*/
}

#top-menu a {
  text-decoration: underline !important;
  -webkit-text-underline-position: under !important;
  -ms-text-underline-position: under !important;
  text-underline-position: under !important;
  text-transform: uppercase !important;
}

我使用transform: rotate(-90deg);来旋转列表项，这是我到目前为止所做的

您将在列表顶部的第二张图片中看到子弹，这也是我的问题