title: CSS dropdown navbar design error
body: <p>I have this list element in my navigation bar that I want to fix.</p>
  
  <p><a href="https://i.stack.imgur.com/vMWLJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vMWLJ.png" alt="Fixing the dropdown align and color"></a></p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;li class="dropdown"&gt;
      &lt;a class="dropbtn" style="cursor:allowed;"&gt;
      &lt;b&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt; &lt;?php echo $_SESSION['user']['nom']; ?&gt; 
      &lt;/b&gt;
      &lt;/a&gt;
     &lt;div class="dropdown-content"&gt;
         &lt;ul&gt;
             &lt;li&gt;&lt;a href="administration.php"&gt;&lt;b&gt;Administration&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;&lt;/br&gt;
             &lt;li&gt;&lt;a href="./traitement/deconnecter.php"&gt;&lt;b&gt;Deconneter&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>li a:hover, .dropdown:hover .dropbtn {
      background-color: #669900 ;
  }
  
  li.dropdown 
  {
      display: inline-block;
      float:right;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      text-align: left;
      text-decoration: none;
      padding: 12px 16px;
  }
  
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
  }
  
  .dropdown-content a:hover {background-color: #555}
  
  .dropdown:hover .dropdown-content {
      display:inline-table;
  }
  </code></pre>
  
  <p>My questions are: <strong>how do I align the dropdown content to the center so it fits with the page? And how do I make the hover color on the dropdown content apply on the whole background instead of just the background of the name?</strong></p>