如何在没有悬停问题的情况下将水平菜单定位到屏幕的上边缘？

Question

I am trying to get my horizontal navigation bar to stick to the top of my screen. The problem is that if I set top to 0, the menu sticks to the top but the initial menu item gets overshadowed when you hover over it. When you take top out, the hover effect resumes to normal but the menu is no longer set to the top edge. What I have tried is messing with position as well as the hover options.

.nav ul {
    list-style: block;
    background-color: black;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    font-size: 110%;
}
.nav > ul > li {
    text-align: center;
}
.nav li {
    text-align: center;
}
.nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
}
.nav a:hover {
    background-color: #005f5f;
}
.nav a.active {
    background-color: #aaa;
    color: #444;
    cursor: default;
}
.nav li li {
    font-size: .6em;
}
.nav li ul {
    display: none;
    position: absolute;
    width: inherit;
}
.nav li:hover ul {
    display: block;
}
.nav li ul li {
    display: block;
}
}
.nav > ul > li > a {
    padding-left: 0;
}

demo: https://jsfiddle.net/dkgj8s7r/

Answer 1

The .nav and ul elements are already aligned to the top of the screen. The problem is the block of php-generated code in the last list item creating a height that pushes the links down to the bottom.

I'm not sure what you want to do with that code, but you may want to put it somewhere else.

If you remove the PHP list item the horizontal menu bar seems to work fine.

<li>
    <?php

    session_start();


    if(isset($_SESSION['loginstatus']) && $_SESSION['loginstatus']==true)
    {
    // echo "<div id='nobrk'>" . $_SESSION['username'] . " is logged in
      <a href='logout.php'>Log out</a><div>";
    echo "<a id='orange'><i><b>" . $_SESSION['username'] . "<b></i></a>";
    echo "<ul><li><a href='logout.php'> Log out</a></li><ul>";

    }
    else
    {
        echo "<a href='login.php'> Log in</a></li>";

    }

    // echo $_SESSION['loginstatus'] . $_SESSION['username'];

    //the alternative is to simply change the name of the index.
    //the problem is if it isnt created at all, it'll still give me an error

?></li>

DEMO: https://jsfiddle.net/dkgj8s7r/1/