禁用导航栏 HTML 中的 li 项目

Answer 1

ul li {
  list-style: none;
  display: inline-block;
  float: left;
  line-height: 50px;
  display: none; /*add this to hide all the menu*/
}

ul li a {
  display: block;
  text-decoration: none;
  font-size: 14;
  font-style: arial;
  color: #1e1e1e;
  padding: 0 20px;
}

/*add these*/
ul li.login {
  display: block;
}

/*add these*/
ul.logged li {
  display: inline-block;
}
/*you need to add class 'logged' to 'ul' element after the user logged in, then all the menu will showing*/

<nav class="menubar">
  <ul class="menulist">
    <li id="login" class="login"><a href="login.html">Login</a></li>
    <li id="settings" class="settings"><a href="settings.html">Settings</a></li>
    <li id="conf" class="conf"><a href="conf.html">Configuration</a></li>
    <li id="about" class="about"><a href="about.html">About</a></li>
  </ul>
</nav>