html - 位置:固定；对我的 CSS 菜单做了一些时髦的事情

Question

我希望我的 .nav 固定下来并随您向下滚动页面，但我不知道如何阻止它在 position: fixed; 时乱七八糟；放入。

JSFIDDLE without position:fixed

        <div class="top">
        <p id="day"></p>
            <script>    {
                var d = new Date();
                var n = d.getDate();
                document.getElementById("day").innerHTML = n;
                }
            </script>
            /
        <p id="month"></p>  
            <script>    {
                var d = new Date();
                var n = d.getMonth();
                document.getElementById("month").innerHTML = n;
                }
            </script>
            /
        <p id="year"></p>
            <script>    {
                var d = new Date();
                var n = d.getYear();
                document.getElementById("year").innerHTML = n-100;
                }
            </script>

        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

        J O H N &nbsp; &nbsp; SM I T H
    </div>

    <div  class="nav">
        <ul>
            <li><a href="#">C O N A C T</a></li>
            <li><a href="#">A B O U T</a></li> 
            <li><a href="example2.html">H O M E</a></li>

        </ul>
    </div>

    <div class="main">
        This is my website.
    </div>

如何实现“固定”我想我可能做错了。

.top    {
background-color: #333333;
opacity:0.85;
padding: 16px;
color: white;
font-family: Lato;
font-size: 16px;
vertical-align: middle;
margin: 0;
position: fixed;
width: 100%;   }


.top p  {
display: inline;   }

.nav    {
top: 0;
left: 0;
position: fixed;   }


.nav li     {
list-style-type: none;
z-index: 1;
position: relative;
width: 115px;
margin-right: 40px;
text-align: center;
float: right;
right: 20px;   }


.nav a      {
    display: inline-block;
    padding: 15.5px;
    text-decoration: none;
    color: white;
    font-family: Lato;
    opacity: 0.6;   }

Answer 1

它适用于 position: fixed 但您需要设置 right 而不是 left。

.nav {position: fixed; top: 0; right: 0;}
.nav ul {margin-top: 0;}

http://jsfiddle.net/cvdbumw7/6/