Styling Drop Down Menu

[dchambers]

I am trying to update my Top Menu Bar to have the drop-down ability to show some of the child pages. I've added them to the navigation menu, but it seems my CSS styling is wrong. I'm not sure how to update it to make it appear similar to the other menu. 

https://www.strouse.com/

[DanielSanchez · Accepted solution]

Hi @dchambers,

Create one class to insert in module of your top bar menu with name "top-menu-bar", and increase this CSS in your CSS file.

.top-menu-bar ul li ul {
    width: 100%;
    background-color: rgba(221,221,221,0.95);
    padding-bottom: .625em;
    top: 3.34em;
    width: 200px;
    display: block;
    border-top: 1px solid rgba(0,146,203,0.8);
}

.top-menu-bar ul li ul li {
    display: block!important;
    -webkit-transition: opacity .4s;
    position: relative;
    z-index: 10;
    padding: 0!important;
    border-bottom: 1px solid #c5c5c5;
}

.top-menu-bar ul li ul li a {
    font-size: .875em!important;
    color: #003b65;
    line-height: 1.4!important;
    text-align: left;
    padding: 8px 15px !important;
}

Look how do in my browser after silumation in Inspect Element:

Did this post help solve your problem? If so, please mark it as a solution.

Best Regards! 🙂

[dchambers]

When I combine that with my current styling, nothing happens. When I make that the only styling, it goes to the middle and has the wrong format.

I replied previously with the CSS language, but I think it got deleted. @DanielSanchez 

[DanielSanchez]

Hi @dchambers you class have a one ";". Remove this ";" to we can see how it will look

I'm waiting 🙂

[dchambers]

That worked splendidly! @DanielSanchez However, the lists start too low to click on it. 

How do I move it to directly under the list like the ones below?

[dchambers]

Also, is it possible to have the initial button (i.e. about us, contact us, and blog) with a background like (materials, applications, industries, and capabilities)?

[DanielSanchez]

Hi @dchambers ,

I'm very glad to have helped

Now, to up your list of chieldren menu, change this code:

.top-menu-bar ul li ul {
   width: 100%;
   background-color: rgba(221,221,221,0.95);
   padding-bottom: .625em;
   top: 37px;
   width: 200px;
   display: block;
   border-top: 1px solid rgba(0,146,203,0.8);
}

Value 37 to top:37 will leave it that way

Best Regards! 🙂

[dchambers]

I changed it to 37px, but it still doesn't allow you to click on any of the children. When you go over "about us" and try to move the cursor down, the children disappear before you can click on them.

.top-menu-bar ul li ul {
    width: 100%;
    background-color: rgba(221,221,221,0.95);
    padding-bottom: .625em;
    top: 37px;
    width: 200px;
    display: block;
    border-top: 1px solid rgba(0,146,203,0.8);
}

.top-menu-bar ul li ul li {
    display: block!important;
    -webkit-transition: opacity .4s;
    position: relative;
    z-index: 10;
    padding: 0!important;
    border-bottom: 1px solid #c5c5c5;
}

.top-menu-bar ul li ul li a {
    font-size: .875em!important;
    color: #003b65;
    line-height: 1.4!important;
    text-align: left;
    padding: 8px 15px !important;
}

[DanielSanchez]

Oh, really.

Then try change the top value to 62px and increase this line codes in your file css.

.top-menu-bar ul {
    padding: 0!important;
}

.top-menu-bar ul li a {
    padding: 20px 10px!important;
}

Did this post help solve your problem? If so, please mark it as a solution.

Best regards 🙂

[dchambers]

Hey @DanielSanchez 

I tried adding that code to my CSS, but something didn't translate right. When I put it in by itself, it goes to the middle with different formatting.  When I combine the two, it doesn't function like yours.  I left the combined version in for the moment. Here is a ss of the current CSS as well as a screen shot of the module.

.site-header {
max-width: 1600px;
margin: auto;
padding-left: 1.25em;
padding-right: 1.25em; }
@media (max-width: 768px) {
.site-header {
overflow: hidden; } }
.site-header .main-logo {
margin-top: 1.5em;
margin-bottom: 1.5em;
text-align: left;
position: relative;
z-index: 2; }
@media (max-width: 767px) {
.site-header .main-logo img {
width: 205px !important; } }
.site-header .top-menu, .site-header .bottom-menu {
text-align: right; }
@media (max-width: 991px) {
.site-header .top-menu, .site-header .bottom-menu {
display: none; } }
.site-header .top-menu ul, .site-header .bottom-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: right; }
.site-header .top-menu ul li, .site-header .bottom-menu ul li {
display: inline-block; }
.site-header .top-menu ul {
padding-top: 0.875em;
padding-bottom: 0.875em;
border-bottom: 1px solid #eae522; }
.site-header .top-menu ul li {
padding-left: 1.5625em;
padding-right: 1.5625em; }
.site-header .top-menu ul li a {
font-size: 1.125em;
line-height: 1.2222222222;
letter-spacing: 0.125em;
text-transform: uppercase;
padding: 0; }
@media (max-width: 1199px) {
.site-header .top-menu ul li a {
font-size: 0.875em; } }
.site-header .top-menu ul li:first-child {
padding-left: 0; }
.site-header .top-menu ul li:last-child {
padding-right: 0; }
.site-header .bottom-menu ul {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex; }
.site-header .bottom-menu ul li {
padding-left: 1.5625em;
padding-right: 1.5625em;
padding-bottom: 0.875em;
padding-top: 0.75em; }
.site-header .bottom-menu ul li a {
font-size: 1.375em;
line-height: 1.2272727273;
letter-spacing: 0.1022727273em;
text-transform: uppercase;
padding: 0; }
@media (max-width: 1199px) {
.site-header .bottom-menu ul li a {
font-size: 1.125em; } }
.site-header .bottom-menu ul li a:after {
display: none !important; }
.site-header .bottom-menu ul li > ul {
width: 100%;
background-color: rgba(221, 221, 221, 0.95);
padding-bottom: 0.625em;
top: 3.34em;
display: block;
border-top: 1px solid rgba(0, 146, 203, 0.8); }
.site-header .bottom-menu ul li > ul li {
display: block;
margin: 0;
padding: 0.9375em 0; }
.site-header .bottom-menu ul li > ul li:hover {
background-color: #eeeeee; }
.site-header .bottom-menu ul li > ul li:hover a {
color: #0092cb; }
.site-header .bottom-menu ul li > ul li a {
font-size: 0.875em;
color: #003B65;
line-height: 1.4;
letter-spacing: 0.1021428571em;
text-align: right;
padding-left: 1.4285714286em;
padding-right: 1.4285714286em; }
.site-header .bottom-menu ul li:last-child {
padding-right: 0; }
.site-header .bottom-menu ul > li > a:hover {
color: #0092cb; }
.site-header .bottom-menu .hs-item-has-children:hover {
background-color: rgba(221, 221, 221, 0.95); }

.top-menu-bar ul li ul {
width: 100%;
background-color: rgba(221,221,221,0.95);
padding-bottom: .625em;
top: 3.34em;
width: 200px;
display: block;
border-top: 1px solid rgba(0,146,203,0.8);
}

.top-menu-bar ul li ul li {
display: block!important;
-webkit-transition: opacity .4s;
position: relative;
z-index: 10;
padding: 0!important;
border-bottom: 1px solid #c5c5c5;
}

.top-menu-bar ul li ul li a {
font-size: .875em!important;
color: #003b65;
line-height: 1.4!important;
text-align: left;
padding: 8px 15px !important;
}