Question

I’ve currently working through a tutorial on responsive webdesign, and I wanted to make my navigation different than what the tutorial had (I want my nav bar to have a coloured background, and be centered..as opposed to the tut’s not having a bkgd and was left-aligned).

Without the background I had the submenu displaying properly. When working to setup the coloured bar in the background, the only way I could get it to show up was to remove the ‘float:left;‘ that I originally had in my ‘.primary ul li{}‘ selector. Now that that is removed, when I mouse over ‘Item 4‘ which is the item with the submenu, the submenu now displays left-aligned with the bar instead of directly below Item 4. You can see what I mean here:

http://jsfiddle.net/mark_a_b/ytB66/1/

If I add the ‘float:left;‘ back in, you’ll see that the background colour bar of my navigation disappears, and my menu items are no longer centered as I want them (not I set the bkgd colour for this version to be dark grey just so you can see the menu items) as shown here:

http://jsfiddle.net/mark_a_b/ytB66/3/

I’m sure it’s likely something silly that I’m just overlooking, but I’ve spent too much time messing around with it and getting nowhere, so was hoping someone else might be able to help me out with this. Appreciate any help offered!

Thanks!!

Answer 1

<ul> and <li> are block-level elements;

normally <li> are placed vertically, while here they’re displayed horizontally because of the display: inline; property value.

Every <li> here is also a container for another <ul> and it’s not good to use an inline-level element as container for a block-level element.

The solution is: use display: inline-block;, which combine inline-level display style with block-level behaviour:

.primary ul li{
    display: inline-block;
    position: relative;
}