CODEWITHSUNDEEP
htmlcsswordpressdropdown
snowflakes
snowflakes

Reputation: 3

Problems with styling the dropdown-menu in Wordpress

In Wordpress, I'm trying to style the dropdown menu used in .primary-menu. Unfortunately, things don't really go as planned.

I copied the HTML from the inspector in Chrome and removed the clutter such as href's and id's and tried to debug it in jsFiddle: https://jsfiddle.net/1cL8fq8b/1/

When hovering over the last item in the results tab, .sub-item seems to take the width of it's parent. I gave .sub-menu an absolute position to make it independent. Still I can't get .sub-item to have it's own width. Here's a screenshot for a better view.

How can I make the sub-item to have it's own width, and not rely on it's parent's width?

Upvotes: 0

Views: 296

Answers (3)

Ahmad Essam
Ahmad Essam

Reputation: 1104

You can add a negative margin-left style to extend your drop down menu to the left.

.sub-menu {
        position: absolute;
        right: 0;
        display: none;
        margin-left:-100px;
}

See this: https://jsfiddle.net/jokbd6L5/

Or define a custom width for your drop down:

.sub-menu {
        position: absolute;
        right: 0;
        display: none;
        width:100px;
}

See this: https://jsfiddle.net/hjoctv5x/

Since its position is absolute I don't think there is a way in CSS to make it expand according to the width of its content (variable width). But you can write some javascript to calculate the max content width for each dropdown menu and set the dropdown menu width accordingly.

Upvotes: 1

Krunkmaster
Krunkmaster

Reputation: 335

First and foremost.. read this http://learnlayout.com/position.html

absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. Remember, a "positioned" element is one whose position is anything except static.

So basically absolute positioning only takes it out of the document flow

also.. this piece of code..

&:hover .sub-menu

is only targeting the submenu. Try targeting the li of the submenu to give it its own width. the submenu ul (which is what your targeting has nothing to do with the width of the li's unless they are sized based on percentages.

Upvotes: 0

Mahmoud Wagdi Al-Awadi
Mahmoud Wagdi Al-Awadi

Reputation: 178

It's because on hover its display is set to block. Set it to inline-block instead

Upvotes: 0

Related Questions