粘性导航栏垂直子弹点

Question

我试图创建一个粘性导航栏，但它只是显示为带链接的垂直项目符号。以下是我使用的代码：

＆＃13;

＆＃13;

/* Spacing & Border of First Link in Navigation */
    .tabs-inner .section:first-child ul {
    margin-top: 0px;
    border: 0 solid #eeeeee;
    }

    /* Background & Border of Navigation */
    .tabs-inner .widget ul {
    background: #999999;
    border: 0px solid #eeeeee;
    text-align: center  !important;
    }

    /* Font, Colour & Border of Links */
    .tabs-inner .widget li a {
    font: normal normal 14px Arvo;
    color: #333333;
    border: 0px solid #ffffff;
    }

    /* Font & Colour of Rollover Links */
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    color: #eeeeee;
    background-color: #ffffff;
    text-decoration: none;
    }
 
    /* Centre Navigation */
    .tabs .widget li, .tabs .widget li{
    display: inline;
    float: none;} 

＆＃13;

<div id="stickynavbar">
  <ul>
    <li><a title="home" href="LINK">Home</a></li>
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

我尝试过不同的版本，无论我尝试创建一个导航栏，它都会不断提出要点。

Answer 1

正如您在评论中所提到的那样;您提供的CSS与导航栏无关＆＃34;但是如果你想让你的导航栏粘在顶部，那么使用下面的CSS让你的导航栏固定在顶部：

＆＃13;

＆＃13;

#stickynavbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  -webkit-transform: translateZ(0);
}

ul {
  list-style-type:none;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

＆＃13;

<div id="stickynavbar">
  <ul>
    <li><a title="home" href="LINK">Home</a></li>
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;