如何在页面顶部将固定水平菜单设为下图

Question

我需要在页面顶部创建一个水平菜单，如下图所示：

我试着把它弄成小提琴，但问题是它没有显示

＆＃13;

＆＃13;

.ul {
  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: left;
}
li a {
  display: block;
  color: white;
  padding: 16px;
  text-decoration: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

那么如何将固定水平菜单放在页面顶部作为上图？

Here是小提琴的链接

Answer 1

ul不是一个班级。这是元素。在这里删除点：.ul {...，因此它应该工作。

沿菜单设置顶部红线jusr set border-top: 4px solid red;

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: left;
}

li a {
    display: block;
    color: white;
    padding: 16px;
    text-decoration: none;
}

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