<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>

CC BY-SA 3.0
2018-04-08T17:19:33.547Z
I'll try and rewrite a simpler version of the CSS with your suggestions and see what comes up. Thanks! :)
Harald
CC BY-SA 3.0
2018-04-06T08:34:18.177Z
2018-04-06T08:34:18.177Z
Seth Warburton
<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>

CC BY-SA 3.0
2018-04-12T08:03:14.137Z
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.
Seth Warburton
CC BY-SA 3.0
2018-04-06T08:35:37.930Z
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.
Seth Warburton
CC BY-SA 3.0
2018-04-08T01:31:26.907Z
Hi Seth, there is a <header> element, I just didn't copy it from the code. My bad.
Harald
<navigation><css>
Navbar in Craft CMS
# 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.

Thanks
Regards a "Total Craft newbie"

        
            
                
                    {% set menu = craft.entries.section('menu') %}
                    

                        
                            {% nav link in menu %}


                            
                                
                                    {% if link.relatedEntry|length %}

                                    {{ link.title }} {% else %}
                                    {{ link.title }} {% endif %} {% ifchildren %}

                                    
                                        
                                            {% children %}
                                        
                                    

                                    {% endifchildren %}
                                
                            
                            {% endnav %}
                        
                    
                
            
        
    

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 Seth, 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! :)  

---

