Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: How does setting a right margin cause the element's parent to become visible in this example?

Tags:

html

css

While looking for keyboard-accessible menus, I stumbled across this question, which has as its answer a CSS drop-down menu http://jsfiddle.net/cfWpE/. It seems to use styling on the anchors in the menu rather than :hover on the <ul> items to display the submenus without any Javascript, but I can't figure out how.

Could someone who's better than me at CSS explain how this works? I'd like to try to extend this to a 3-level menu, but without understanding how it works for two levels, that's going to be difficult.

edited for clarity:

It's not actually the keyboard part that confuses me; I understand that tabbing through updates :focus on the current focus link, but the only CSS rule that seems to be applied to those elements is

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
    margin-right:1px;
    background: black;
}

I don't understand how setting margin-right to 1 pixel makes the parent <li> visible.

like image 601
Shawn D. Avatar asked Sep 27 '12 19:09

Shawn D.


People also ask

What does margin-right do in CSS?

The margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

What effect does happen on an element if it's left and right margin is set to auto?

By assigning auto to the left and right margins of an element, they take up the available horizontal space in the element's container equally – and thus the element gets centered.

What class is used to set the margin-right in CSS?

The margin-right property in CSS is used to set the right margin of an element.

Does margin affect the CSS box model?

The standard CSS box model Note: The margin is not counted towards the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the border — it does not extend into the margin.


1 Answers

This is an interesting Technique to achieve a dropdown menu.

The list items .list have a very high negative margin-top and a width of 250px. This places their content out of the viewport of the browser. The child anchors a.category have a positive margin-top with exact the same value, so they are visible to the user as if they were positioned normally. Now both, the a.category and the ul.submenu have a float:left applied. that's why the submenu does not appear beneath the anchor, but beside it. (But it has no margin-top, so it is still "invisible") Both elements (a.category and ul.submenu) have 125px width and fit perfectly into the parent li which has a width of 250px. Now on hover the anchor gets an additional 1px margin. This makes both elements too wide to fit into the parent container side to side and so the floated submenu breaks onto a newline and suddenly appears below the anchor - TADA:-D

I hope you could follow my explanation - if not ask please which part I need to clarify;)

Extending this to a third level is not possible - I would just go with a regular css-menu with display:block; and hide. However, you can use absolute positioning and switch the top value from a very high negative value to 0 when hovering, which would have the same effect.

Generally, i would use this with care. Some searchengines consider text that is hidden via negative margins or text-indent as blackhat SEO and may penalize one for that. Although it might be possible that Google is clever enough to recognize this as a regular dropdown-menu

like image 147
Christoph Avatar answered Sep 20 '22 18:09

Christoph