I am trying to get my head around making a drop down menu bar using css. I have created this bar (see html / css) but am really struggling with getting my head around the size of each ‘li’ element, and their subsequent drop down items. The way I have spread each of my 5 ‘li’ elements is by defining each box width at 18%. Obviously I cannot do this for the drop down box, so am wondering how to make them the same size?
@jurotek for this thing inline-block could indeed be a better fit. I never feel quite comfortable with it, but that’s just me … Could be interesting making this work as flexbox: display: flex, with display: inline-block as fallback. Might fork your fork of my fork for that :\
@tjgriffiths1 The negative top margin on the nav in my example, with the top-border of the body as kind of “pseudo background”, is no longer needed when you would go with inline-block instead of floats. But if you would ever want to change the source order of the HTML markup, and put the header with h1 before the nav, then pulling an element up with negative top margin is a useful trick to keep in mind.
@Atelierbram :) go fot it, let us know when you got it. As far as flexbox, I haven’t spend much time with it so I don’t have a good understanding of it yet. Here is my first try about a week ago, but I am unsure about how I hacked it up in media query.
The downside of the inline-block here is that requires the elimination of the closing list item tag. While still valid, it’s not a very good practice. The 20% width fails otherwise (unless you get into some hacks). This is perfect example of where a float, imho, is better than inline-block (which admittedly is better in other situations).
@wolfcry911 they-re all good and valid points you make, but at the end what it comes down to is a matter of preference. If floats suit you better I’d never say you wrong.
For some time I did use floats myself on nav class selectors or in grids and I never really felt comfortable with clear fix hacks or using overflow.
Coincidentally, this morning I’ve been doing some final testing using inline block display on nav, sub nav and grid and somehow I feel better about it than using floats. Sure, I do omit closing list item tags to deal with white space and as you say it is valid, and in my opinion better then using hacks like 0 font size on parent or negative margins on element itself.
I’ll agree it comes down to preference in this case. To me using overflow is natural (it is in the specs) and the clear fix containing method is brilliant. A couple of notes: in this particular situation the floats don’t even need containment! Just move the background from the nav to the li and it’s all good. The other thing is there are even more methods for float containment, one of which the OP’s code had – to float the ul.
Just move the background from the nav to the li and it’s all good.
Have you tried to getting the alignment right with this method? Wouldn’t that involve using some ‘magic numbers’?
In my mind one can make it much easier, and also more bulletproof (giving away my preference here) when separating concerns (aesthetic and structural ) like I did in my fork with pulling-up-of-an-element with negative top margin. Only slight ‘ugly’ bit is the min-height on the nav and ul, not really magic numbers though …