如何使用HTML制作一个简单美观的导航栏（代码详解）

<nav>

    <ul class="navbar">

        <li class="nav-item selected"><a href="#">Home</a></li>

        <li class="nav-item"><a href="#">Coffee</a></li>

        <li class="nav-item"><a href="#">Food</a></li>

        <li class="nav-item"><a href="#">Catering</a></li>

        <li class="nav-item"><a href="#">About</a></li>

        <li class="nav-item"><a href="#">Contact</a></li>

    </ul>

</nav>

<style>

nav{

   position:fixed;

}

.nav-item{

   color: #000;

   border: 1px solid blue;

   background-color: rgba(255, 255, 255, .6 )

}

.nav-item:hover

{

        background-color: rgba(0, 255, 255, .6 )

}

.selected{

   color: #058;

   border: 1px solid red;

   background-color: rgba(255, 0, 255, .6 )

}