2番目のCSSのドロップダウンを追加し、それが整列しません

Question

私のページに2番目のCSSドロップダウンメニューを追加しました。これはページの左側に表示されます。最初のものは、テキストが中央揃えであり、すべてがうまくいきます。私は管理者の操作のために管理者がログインしているときに2つ目を追加しました。 テキストはこのメニューで右揃えされ、ドロップダウンは画面の左側に表示されます。ここで

がjsfiddleある - https://jsfiddle.net/q0nsrdgo/

Htmlの

<div id="loginbar"> 
<ul> 
<li>Welcome Xenarious | </li><li><a href="logout.php">Logout</a>&nbsp;|</li>  
<li class="dropdown"><a href="#" class="dropbtn">Admin Controls</a> 
     <div class="dropdown-content"> 
      <a href="addcustomer.php">Add Customer</a> 
      <a href="updatecustomer.php">Edit Customer</a> 
      <a href="addproduct.php">Add Product</a> 
      <a href="updateproduct.php">Update Product</a> 
     </div> 
     |</li> <li><a href="orders.php">Orders</a></li> 
</ul> 
</div> 
<header> 
    <img src="../common/techtitan-title.png"> 
</header> 
<nav> 
<ul> 
    <li><a href="index.php">Home</a></li> 
    <li class="dropdown"><a href="products.html" 
class="dropbtn">Products</a> 
     <div class="dropdown-content"> 
      <!--<a href="products.html">Desktops</a>--> 
      <a href="products.html">Notebooks</a> 
      <a href="products.html">Tablets</a> 
      <a href="products.html">Smartphones</a> 
     </div> 
    </li> 
    <li><a href="services.html">Services</a></li> 
    <li><a href="about.html">About Us</a></li> 
    <li><a href="feedback.html">Feedback</a></li> 
</ul> 

のCss

#loginbar { 
text-align: right; 
background-color: #1D6000; 
color: #FFD700; 
font-size: 10pt; 
z-index: 2; 
overflow: auto; 
width: 100%; 
display: block; 
margin: auto; 
} 
header { 
background-color: #1D6000; 
margin-bottom: 0; 
text-align: center; 
z-index: 1; 
} 
header img { 
margin: auto; 
text-align:center; 
} 

nav { 
overflow: auto; 
width: 100%; 
display: block; 
margin: auto; 
margin-bottom: 20px; 
background-color: #1D6000; 
text-align: center; 
box-shadow: 0px 8px 16px 0px rgba(5,5,5,0.5); 
border-bottom: 3px ridge #FFD700; 
font-size: 14pt; 
} 
nav ul, #loginbar ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #1D6000; 
} 
nav li, #loginbar li { 
/*float: left*/ 
display: inline; 
margin: 0; 
padding: 0; 
} 
li a, .dropbtn { 
display: inline-block; 
color: #FFD700; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 
li a:hover, .dropdown:hover .dropbtn { 
background-color: #FFD700; 
color: #1D6000; 
} 
li.dropdown { 
display: inline-block; 
} 
.dropdown-content { 
display: none; 
position: absolute; 
background-color: #1D6000; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(5,5,5,0.5); 
/*z-index: 1;*/  
} 
.dropdown-content a { 
color: #FFD700; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
text-align: left; 
} 
.dropdown-content a:hover { 
background-color: #FFD700; 
color: #1D6000; 
} 
.dropdown:hover .dropdown-content { 
display: block; 
} 

Answer 1

次のようにあなたのCSSを更新 -

nav li, #loginbar li { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

のみごので、クラスがinline-blockに設定されている場合、必要に応じてドロップダウンが表示されませんでした。