Search code examples
cssmaterialize

materializecss, vertically offset dropdown menu content

I'm trying to add a dropdown menu to my nav as detailed in the docs here.

By default, .dropdown-content is set to top: 0;. And here is the default behavior:

enter image description here

If I change the top to 50px in materialize.css it actually moves it up 50 pixels and sets the element style to top: -50px.

Here is the code:

.dropdown-content {
    top: 50px;
}

But when it renders, the element looks like this:

<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -50px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

(The key being `top: -50px;)

I tested with multiple values, here is 65:

.dropdown-content {
    top: 65px;
}
<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -65px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">

(now it is top: -65px)

Here's a screenshot if you care to take a look

Why is it inverting this value? How can I make the dropdown so it doesn't occlude the main menu?

Solution

  • I checked it and i see the best way to do that becuase the styles comes from JS which is have special calc i have checked and if you want to avoid any fixed height maybe you will have padding or anything in the header so the best to give the top:100% and to use !important to be stronger than the JS

    give the class .dropdown-content top: 100% !important; 

    .dropdown-content {
  top: 100% !important;
}