Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
ashley king
2,475 PointsHow to keep Dropdowns open with Foundations css
I am going through the Wordpress Development track and have been working on my portfolio site menu. Its using Foundations css and js. I am having trouble working the dropdown menu. When I hover over the parent, the menu drops. But when I move the cursor to click on one of the sub-menu items, it closes and I can't click.
How do I keep this menu open?
.top-bar {
text-align: center;
background-color:#E9367B;
}
ul.center-buttons {
display: inline-block !important;
}
}
.top-bar.expanded {
background: #333333;
}
.menu-item-object-page li {
background-color:#C6BF43;
}
.sub-menu li {
list-style: none;
float:left;
background-color:#E9367B;
}
ul .sub-menu {
display: none;
position: absolute;
background-color:#E9367B;
padding: 0px;
width: 150px;
}
li:hover .sub-menu {
display:block !important;
margin-left:0px;
}
.sub-menu li:last-child {
margin-bottom: 0;
}
.sub-menu a {
color: #999;
text-decoration: none;
padding:0px;
margin:0px;
}
.sub-menu a:hover {
color: #fff;
}
4 Answers
Jinson Abraham
1,700 PointsHere is a basic css outline for the CSS only dropdown menu based on the HTML generated by your wp_nav_menu tag + Foundation CSS. Check Codepen
Jinson Abraham
1,700 PointsCan you post your HTML? From the CSS it seems like you are using the same .submenu class name for the first level and second level menu items.
Anyways, as it is now in the CSS I believe the following
li:hover .sub-menu {
display:block !important;
margin-left:0px;
}
should be changed to
.sub-menu li:hover .sub-menu {
display:block !important;
margin-left:0px;
}
ashley king
2,475 PointsThe Html is :
```<nav class="top-bar" data-topbar role="navigation"> <section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="center-buttons">
<?php
$defaults = array(
'container' => false,
'theme_location' => 'primary-menu',
'menu_class' => 'no-bullet'
);
wp_nav_menu ( $defaults );
?>
</ul>
</section>
</nav>
I tried adding .sub-menu before li:hover and it stopped the menu from dropping down at all.
ashley king
2,475 PointsThankyou! It works now.