Answers.Body: <p>There is nothing that I can see in your CSS that hides the dropdown in the first place. Also I hope you don't mind me saying but your CSS seems over-complicated. To hide / show the drop down you could just use something along the lines of:</p>
  
  <pre><code>.dropdown { 
    height: 0; 
    visibility: hidden; /* Display: none; is bad for accessibility. */
  }
  
  .dropdown:hover,
  /* Don't forget a focus state! */
  .dropdown:focus {
    height: auto;
    visibility: initial;
  }
  </code></pre>
  
  <p>There's no need to over specify your styles, it needlessly complicates things and adds bloat to your code, making it harder to debug for one.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-08T17:19:33.547Z
Answers.Text: I'll try and rewrite a simpler version of the CSS with your suggestions and see what comes up. Thanks! :)
Answers.UserDisplayName: Harald
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-06T08:34:18.177Z
Answers.LastActivityDate: 2018-04-06T08:34:18.177Z
Answers.UserDisplayName: Seth Warburton
Body: <p>I'm currently doing some work on our new website, and I have water up to my chest. :)</p>
  
  <p>I'm trying to create a top navigation bar (dropdown) based on entries in CraftCSM to create the menu. I'm thinking only to have one level in the dropdown menus.</p>
  
  <p>This is what I have so far. I've also attached the css for this, cause it might have somthing to do with that one too.</p>
  
  <p>Both menus appear at the same time, and only one of the dropdowns appear. Should be several more.</p>
  
  <p><a href="https://i.sstatic.net/J6RNh.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/J6RNh.jpg" alt="Dropdown Menu"></a></p>
  
  <p>Thanks
  Regards a "Total Craft newbie"</p>
  
  <pre><code>&lt;section&gt;
          &lt;div class="topnav"&gt;
              &lt;div class="container"&gt;
                  &lt;nav class="menu"&gt;
                      {% set menu = craft.entries.section('menu') %}
                      &lt;ul&gt;
  
                          &lt;div class="dropdown"&gt;
                              {% nav link in menu %}
  
  
                              &lt;li&gt;
                                  &lt;div class="dropdown-content"&gt;
                                      {% if link.relatedEntry|length %}
  
                                      &lt;a href="{{ link.relatedEntry[0].url }}" class="dropdown-content"&gt;{{ link.title }}&lt;/a&gt; {% else %}
                                      &lt;a href="{{ link.customURL }}" class="dropdown-content"&gt;{{ link.title }}&lt;/a&gt; {% endif %} {% ifchildren %}
  
                                      &lt;ul&gt;
                                          &lt;div class="dropdown-content"&gt;
                                              {% children %}
                                          &lt;/div&gt;
                                      &lt;/ul&gt;
  
                                      {% endifchildren %}
                                  &lt;/div&gt;
                              &lt;/li&gt;
                              {% endnav %}
                          &lt;/div&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.topnav {
      background-color: rgba(40,168,221,1);
      height: 50px;
      font-family: 'Titillium Web', sans-serif;
      position: fixed;
      width: 100%;
      z-index: 4;
  }
  
  .topnav .menu {
      float: left;
      font-size: 12px;
  }
  
  .topnav .menu ul {
      list-style: none;
      padding: 0px;
      margin: 0px;
  }
  
  .topnav .menu ul li {
      float: left;
  }
  
  .topnav .title {
      color: white;
      line-height: 50px;
      float: left;
      font-size: 15px;
      font-weight: bold;
  }
  
  .topnav .menu ul li a {
      text-transform: uppercase;
      margin-left: 15px;
      margin-right: 15px;
      padding-top: 15px;
      padding-bottom: 2px;
      text-decoration: none;
      color: white;
      font-size: 13px;
      line-height: 20px;
      display: inline-block;
  }
  
  .topnav .menu ul li a:hover {
      border-bottom: solid 3px #ffffff;
  }
  
  .topnav .menu ul li a:last-of-type {
      padding-right: 0px;
  }
  
  .topnav .menu .dropbtn {
      background-color: rgba(40,168,221,1);
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
  }
  
  .topnav .menu .dropdown ul li a {
      position: relative;
      display: inline-block;
      float: left;
  }
  
  .topnav .menu .dropdown:hover ul li a {
      border-bottom: solid 3px #ffffff;
  }
  
  .topnav .menu .dropdown:last-of-type ul li a {
      padding-right: 0px;
  }
  .topnav .menu .dropdown-content ul li a{
      display: none;
      position: absolute;
      background-color: rgba(40,168,221,1);
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  
  /* Show the dropdown menu on hover */
  .topnav .menu .dropdown:hover .dropdown-content ul li a{
      display: block;
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-12T08:03:14.137Z
Comments.Text: A section element should contain a title in a heading tag, I.e <h1> to <h6>, if it doesn’t then <section> should not be used.
Comments.UserDisplayName: Seth Warburton
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-06T08:35:37.930Z
Comments.Text: Your use of the section element here is not correct, as there is no heading element, it would be better if it was not there at all.
Comments.UserDisplayName: Seth Warburton
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-04-08T01:31:26.907Z
Comments.Text: Hi Seth, there is a <header> element, I just didn't copy it from the code. My bad.
Comments.UserDisplayName: Harald
Tags: <navigation><css>
Title: Navbar in Craft CMS
ThreadText: # Navbar in Craft CMS
  
  (Asked by: username_0 on 2018-04-05)
  
  I'm currently doing some work on our new website, and I have water up to my chest. :)
  
  I'm trying to create a top navigation bar (dropdown) based on entries in CraftCSM to create the menu. I'm thinking only to have one level in the dropdown menus.
  
  This is what I have so far. I've also attached the css for this, cause it might have somthing to do with that one too.
  
  Both menus appear at the same time, and only one of the dropdowns appear. Should be several more.
  
  [![Dropdown Menu](https://i.sstatic.net/J6RNh.jpg)](https://i.sstatic.net/J6RNh.jpg)
  
  Thanks
  Regards a "Total Craft newbie"
  
  ```
  <section>
          <div class="topnav">
              <div class="container">
                  <nav class="menu">
                      {% set menu = craft.entries.section('menu') %}
                      <ul>
  
                          <div class="dropdown">
                              {% nav link in menu %}
  
                              <li>
                                  <div class="dropdown-content">
                                      {% if link.relatedEntry|length %}
  
                                      <a href="{{ link.relatedEntry[0].url }}" class="dropdown-content">{{ link.title }}</a> {% else %}
                                      <a href="{{ link.customURL }}" class="dropdown-content">{{ link.title }}</a> {% endif %} {% ifchildren %}
  
                                      <ul>
                                          <div class="dropdown-content">
                                              {% children %}
                                          </div>
                                      </ul>
  
                                      {% endifchildren %}
                                  </div>
                              </li>
                              {% endnav %}
                          </div>
                      </ul>
                  </nav>
              </div>
          </div>
      </section>
  
  ```
  
  CSS
  
  ```
  .topnav {
      background-color: rgba(40,168,221,1);
      height: 50px;
      font-family: 'Titillium Web', sans-serif;
      position: fixed;
      width: 100%;
      z-index: 4;
  }
  
  .topnav .menu {
      float: left;
      font-size: 12px;
  }
  
  .topnav .menu ul {
      list-style: none;
      padding: 0px;
      margin: 0px;
  }
  
  .topnav .menu ul li {
      float: left;
  }
  
  .topnav .title {
      color: white;
      line-height: 50px;
      float: left;
      font-size: 15px;
      font-weight: bold;
  }
  
  .topnav .menu ul li a {
      text-transform: uppercase;
      margin-left: 15px;
      margin-right: 15px;
      padding-top: 15px;
      padding-bottom: 2px;
      text-decoration: none;
      color: white;
      font-size: 13px;
      line-height: 20px;
      display: inline-block;
  }
  
  .topnav .menu ul li a:hover {
      border-bottom: solid 3px #ffffff;
  }
  
  .topnav .menu ul li a:last-of-type {
      padding-right: 0px;
  }
  
  .topnav .menu .dropbtn {
      background-color: rgba(40,168,221,1);
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
  }
  
  .topnav .menu .dropdown ul li a {
      position: relative;
      display: inline-block;
      float: left;
  }
  
  .topnav .menu .dropdown:hover ul li a {
      border-bottom: solid 3px #ffffff;
  }
  
  .topnav .menu .dropdown:last-of-type ul li a {
      padding-right: 0px;
  }
  .topnav .menu .dropdown-content ul li a{
      display: none;
      position: absolute;
      background-color: rgba(40,168,221,1);
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  
  /* Show the dropdown menu on hover */
  .topnav .menu .dropdown:hover .dropdown-content ul li a{
      display: block;
  
  ```
  
  **Tags:** navigation, css
  
  > **Comments:**
  > **username_1**: Your use of the section element here is not correct, as there is no heading element, it would be better if it was not there at all.  
  > **username_0**: Hi username_1, there is a <header> element, I just didn't copy it from the code. My bad.  
  > **username_1**: A section element should contain a title in a heading tag, I.e <h1> to <h6>, if it doesn’t then <section> should not be used.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2018-04-06. Score: 1
  
  There is nothing that I can see in your CSS that hides the dropdown in the first place. Also I hope you don't mind me saying but your CSS seems over-complicated. To hide / show the drop down you could just use something along the lines of:
  
  ```
  .dropdown { 
    height: 0; 
    visibility: hidden; /* Display: none; is bad for accessibility. */
  }
  
  .dropdown:hover,
  /* Don't forget a focus state! */
  .dropdown:focus {
    height: auto;
    visibility: initial;
  }
  
  ```
  
  There's no need to over specify your styles, it needlessly complicates things and adds bloat to your code, making it harder to debug for one.
  
  > **Comments:**
  > **username_0**: I'll try and rewrite a simpler version of the CSS with your suggestions and see what comes up. Thanks! :)  
  
  ---
  
  