title: CSS drop-down menu displays horizontally instead of vertical
body: <p>**</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body 
  {
   
    background-color: #9cb4c0;
    
    background-size: 100% 100%;
  }
   
  .div-1
  {
    float: right;
   
    padding: 20px 10px;
  }
   
  h2
  { 
    text-align: right;
  }
   
  h3
  {
    
    text-align: left;
    
    color: white;
  }
   
  a:link
  {
    
    color: rgb(7, 19, 86);
      
    background-color: transparent;
      
    text-decoration: none;
    
    font-size: 20px;
  }
  
  a:visited 
  {
      
    color: orange;
      
    background-color: transparent;
      
    text-decoration: none;
  }
   
  a:active
  {
      
    color: rgb(216, 120, 10);
      
    background-color: transparent;
      
    text-decoration: underline;
  }
  
  .list-1 
  {
      
    list-style-type: none;
    
    overflow: hidden;
    
    margin: 0;
    
    padding: 0;
    
    text-align : right;
  }
  
  .list-1:active
  {
   box-shadow: 0 5px #666;
   
   transform: translateY(4px);
  }
   
  .list-1 li  a
  {
    
    float: right;
  
    display: block;
    
    padding: 8px;
    
    text-align: center;
    
    border: 1px solid #e7e7e7;
      
    background-color: #f3f3f3;
    
    color: #666;
  }
   
  .list-1 li a:hover 
  {
    background-color: #ff6c00;
  }
   
  .list-2 
  {
   
    list-style-type: none;
    
    margin: 0;
    
    padding: 0;
    
    overflow: hidden;
    
    background-color: #228bbb;
  }
   
  .list-2 a 
  {
    
    border-right: 1px solid #bbb;
  
    float: left;
    
    display: block;
    
    padding: 14px 16px;  
    
    color: rgb(7, 19, 86);
  }
   
  .drop-button 
  {
    
     display: inline-block;
     
     text-align: center;
     
     padding: 16px;
     
     border: none;
     
     cursor: pointer;
  }
   
  .dropdown 
  {
    
    display: block;
    
    margin: 0;
    
    padding: 0;
  }
   
  .dropdown-content 
  {
   
    display: none;
    
    position: absolute;
    
    background-color: #f9f9f9;
    
    min-width: 160px;
    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }
   
  .dropdown-content a 
  {
   
    color: black;
    
    padding: 12px 16px;
    
    text-decoration: none;
    
    display: block;
    
    text-align: left;
  }
   
  .dropdown-content a:hover 
  {
   
    background-color: #f1f1f1;
  }
   
  .dropdown:hover .dropdown-content 
  {
   
    display: inline-block;
  }
   
  .list-2 a:hover:not(.active) 
  {
    
    background-color: #ff6c00;
  }
   
  .list-2 .active 
  {
      
    background-color: #ff6c00;
  }
  
  .list-3 
  {
   
    color: rgb(7, 19, 86);
    
    list-style-type: disk;
  }
   
  .list-4 
  {
    
    color: rgb(9, 91, 130);
    
    list-style-type: disk;
    
    font-size: 20px;
  }
  
  .div-2Dropdown
  {
    position: relative;
    
    display: inline-block;
  }
   
  .div-2Dropdown-content
  {
    display: none;
    
    position: absolute;
    
    background-color: #f9f9f9;
    
    min-width: 160px;
    
    box-shadow: opx 8px 16px 0px rgba(0,0,0,0.2);
    
    z-index: 1;
  }
  
  .div-2Dropdown:hover .div-2Dropdown-content
  {
    display: block;
  }
   
  .desc
  {
   padding: 3px;
   
   text-align: center;
  }
   
  table
  {
     
     float: left;
     
     padding: 10px;
     
     border: 10px;
     
     border-color: rgb(7, 15, 79);
     
     margin: 10px;
     
     border-width: 2px;  
      
     border-style: groove;
  }
   
  .button 
  {
     background-color: #2980B9;
     
     color: white;
     
     font-family: arial;
     
     border: none;
     
     padding: 10px 10px;
     
     text-align: center;
     
     display: inline-block;
     
     margin: 4px 2px;
     
     -webkit-transition-duration: 0.4s;
     
     transition-duration: 0.4s;
     
     cursor: pointer;
     
     font-style: italic;
     
     outline: none;
     
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
  
  .button:hover
  {
   background-color: #2980B9;
   
   border: 2px solid #2980B9;
   
   box-shadow: 0px 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  }
  
  .button:active
  {
   background-color: #2980B9;
   
   box-shadow: 0 5px #666;
   
   transform: translateY(4px);
  }
   
  footer 
  {
     
     clear: both;
      
     position: relative;
      
     z-index: 10;
      
     height: 1em;
      
     margin-top: -3em;
     
     text-align: center;
     
     background-color: #228bbb;
     
     color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;title&gt; SLIIT LIBRARY &lt;/title&gt;
  
  &lt;link rel = "stylesheet" type = "text/css" href = "Style.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;img src = "SLIIT.png" width = "300" height = "200"&gt;
  
  &lt;div class = "div-1"&gt;
  
  &lt;ul class = "list-1"&gt;
  
   &lt;li&gt; &lt;a href = "/Login/" target = "_blank"&gt; Login &lt;/a&gt; 
   
    &lt;a href = "Login to the system.html" target = "_blank"&gt; Register &lt;/a&gt;
   &lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;h2&gt; &lt;a href = "/SLIIT LIBRARY/" target = "_blank"&gt; SLIIT LIBRARY &lt;/h2&gt; &lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;ul class = "list-2"&gt;
   &lt;li&gt; &lt;a href = "/Home/" target = "_blank"&gt; Home &lt;/a&gt; &lt;/li&gt;
   &lt;li style = "float : right"&gt; &lt;a class = "active" href = "/About Us/" target = "_blank"&gt; About Us&lt;/a&gt; &lt;/li&gt;
   &lt;li&gt; &lt;a href = "/Membership/" target = "_blank"&gt; Membership &lt;/a&gt; &lt;/li&gt;
   &lt;li&gt; &lt;a href = "/Staff/" target = "_blank"&gt; Staff &lt;/a&gt; &lt;/li&gt;
   &lt;li&gt; &lt;a href = "/Search/" target = "_blank"&gt; Search &lt;/a&gt; &lt;/li&gt; 
   &lt;li class = "dropdown"&gt; &lt;a href = "javascript:void(0)" class = "drop-button"&gt; New Arrivals &lt;/button&gt; &lt;/a&gt;
    &lt;div class = "dropdown-content"&gt;
     &lt;a href = "/Books/"  target = "_blank"&gt; Books &lt;/a&gt;
     &lt;a href = "/Magazines/"  target = "_blank"&gt; Magazines &lt;/a&gt;
     &lt;a href = "/News Papers/"  target = "_blank"&gt; News Papers &lt;/a&gt;
    &lt;/div&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div style = "float : left ; background-color : #39a2d2 ; width : 300px ; height : 950px ; margin : auto ; margin-right : 2em"&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>**I've tried over and over to overcome the issue but I couldn't find a solution for this. Any ideas to fix the drop-down menu to it's vertical display? Plus "a:visited" also isn't working. How to fix this?</p>
  
  <p>Here's my CSS code;</p>
  
  <p>a:visited 
  {</p>
  
  <pre><code>    color: orange;
  
      background-color: transparent;
  
      text-decoration: none;
  </code></pre>
  
  <p>}</p>
  
  <p>.list-2 
  {</p>
  
  <pre><code>    list-style-type: none;
  
      margin: 0;
  
      padding: 0;
  
      overflow: hidden;
  
      background-color: #228bbb;
  </code></pre>
  
  <p>.drop-button 
  {</p>
  
  <pre><code>        display: inline-block;
  
          text-align: center;
  
          padding: 16px;
  
          border: none;
  
          cursor: pointer;
  </code></pre>
  
  <p>}</p>
  
  <p>.dropdown 
  {</p>
  
  <pre><code>    display: block;
  
      margin: 0;
  
      padding: 0;
  </code></pre>
  
  <p>}</p>
  
  <p>.dropdown-content 
  {</p>
  
  <pre><code>    display: none;
  
      position: absolute;
  
      background-color: #f9f9f9;
  
      min-width: 160px;
  
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  </code></pre>
  
  <p>}</p>
  
  <p>.dropdown-content a 
  {</p>
  
  <pre><code>    color: black;
  
      padding: 12px 16px;
  
      text-decoration: none;
  
      display: block;
  
      text-align: left;
  </code></pre>
  
  <p>}</p>
  
  <p>.dropdown-content a:hover 
  {</p>
  
  <pre><code>    background-color: #f1f1f1;
  </code></pre>
  
  <p>}</p>
  
  <p>.dropdown:hover .dropdown-content 
  {</p>
  
  <pre><code>    display: inline-block;
  </code></pre>
  
  <p>}</p>
  
  <p>Here's my HTML code;</p>
  
  <pre><code>&lt;ul class = "list-2"&gt;
  &lt;li&gt; &lt;a href = "/Home/" target = "_blank"&gt; Home &lt;/a&gt; &lt;/li&gt;
  &lt;li style = "float : right"&gt; &lt;a class = "active" href = "/About Us/" target = "_blank"&gt; About Us&lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href = "/Membership/" target = "_blank"&gt; Membership &lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href = "/Staff/" target = "_blank"&gt; Staff &lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;a href = "/Search/" target = "_blank"&gt; Search &lt;/a&gt; &lt;/li&gt; 
  &lt;li class = "dropdown"&gt; &lt;a href = "javascript:void(0)" class = "drop-button"&gt; New Arrivals &lt;/button&gt; &lt;/a&gt;
      &lt;div class = "dropdown-content"&gt;
          &lt;a href = "/Books/"  target = "_blank"&gt; Books &lt;/a&gt;
          &lt;a href = "/Magazines/"  target = "_blank"&gt; Magazines &lt;/a&gt;
          &lt;a href = "/News Papers/"  target = "_blank"&gt; News Papers &lt;/a&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>