css - 如何在页面顶部制作如下图所示的固定水平菜单

Question

我需要在页面顶部制作一个水平菜单，如下图所示:

我试着弄了一下，但问题是它不显示

.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;
}

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

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

Here是 fiddle 的链接

Answer 1

ul 不是一个类。这是元素。在此处删除点:.ul {...，因此它应该可以工作。

要沿着菜单制作顶部红线，您可以设置 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>