Как сделать дизайн для горизонтального фиксированного меню, как на картинке ниже

Question

Мне нужно сделать горизонтальное фиксированное меню как изображение ниже:

меню мне нужно оформить

Я пытаюсь сделать это

но оставляя некоторую точечную модификацию, чтобы быть такой же как изображение выше

остающиеся пункты (означая, что я должен добавить эти пункты к скрипке)

1 - добавить | между словами

2 - также черный прямоугольник меню не такого размера, как на картинке выше.

моя скрипка, как показано ниже (что я пробую)

https://jsfiddle.net/ahmedsa/xkabohyw/

 ul {
        border-top: 4px solid red;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed; /* Set the navbar to fixed position */
        top: 0; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */

    }

    li {
        float: right;
    }

    li a {
        display: block;
        color: white;
        padding: 16px;
        text-decoration: none;
    }
<ul>
        <li><a href="#home">الرئيسيه</a></li>
        <li><a href="#news">نبذه عن</a><i>|</i></li>
        <li><a href="#contact">اتصل بنا</a></li>
    </ul>

чтобы

Как добавить эти очки в скрипку, если это возможно, пожалуйста?

Answer 1

Есть много способов достичь этого. Вы можете использовать границы или фоновое изображение. Но это решение с помощью HTML и CSS, вот код обновления

HTML

  <ul>
        <li><a href="#home">الرئيسيه</a></li>
        <span class="divider"></span>
        <li><a href="#news">نبذه عن</a><i>|</i></li>
        <span class="divider"></span>
        <li><a href="#contact">اتصل بنا</a></li>
    </ul>

CSS

ul {
    border-top: 4px solid red;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */

}

li {
    float: right;

    line-height:1px;

}
span {
     display: inline-block;
     width: 0;
     height: 1em;
     border-left: 1px solid #ccc;
     border-right: 1px solid #ccc;
     margin-top:8px;
     float: right;
}
li a {
    display: block;
    color: white;
    padding: 16px;
    text-decoration: none;


}