The HTML structure is correct, but you need to use some CSS to get a dropdown menu to appear correctly. This should be enough to get you started:
nav li {
position: relative;
}
nav ul ul {
display: none;
position: absolute;
top: 40px;
}
nav li:hover > ul {
display: block;
}
nav li li {
padding: 5px;
}
thank you Stephen, much appreciated!
However I implemented CSS with all its classes and IDs, still nothing
<nav>
<div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="no-bullet">
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-has-children menu-item-15">
<a href="http://veltaberzina.com/">Portfolio</a>
<ul class="sub-menu">
<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://veltaberzina.com/beauty/">Beauty</a></li>
<li id="menu-item-166" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166"><a href="http://veltaberzina.com/commercials/">Commercials</a></li>
<li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://veltaberzina.com/editorial/">Editorial</a></li>
</ul>
</li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16">
<a href="http://veltaberzina.com/get-in-touch/">Contact</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">
<a href="http://veltaberzina.com/about/">About</a></li>
</ul>
</div>
</nav>
nav li.menu-item-15 {
position: relative;
}
nav ul#menu-primary-menu ul.sub-menu {
display: none;
position: absolute;
top: 40px;
}
nav li.menu-item-15:hover > ul.sub-menu {
display: block;
}
nav li li {
padding: 5px;
}
http://veltaberzina.com/
the submenu just got hidden, when hovering over, it does not appear. Can you spot the mistake?
I don’t see the code I posted on your site. How did you add it?
Thank you for looking into this.
I had to adjust the classes to it, cause the css did not hide the items. but now the items are hidden, however on hover those are not displaying.
View post on imgur.com
cheers
By including the classes and IDs, you’ve accidentally made the rule that always hides the submenus more specific than the rule that displays the submenus on hover. You should use the code exactly as I provided it.
Also, you’ve got some redundant CSS in responsive.css. If you include the code I provided in the media query at line 1 (min-width: 480px), you don’t need to include it again in the media queries at line 79 (min-width: 780px) and line 136 (min-width: 480px and max-width: 780px).
worked like a charm, thank you Stephen
