Combining positioning, floating and display

[Mkkl]

Dear people! I have a question. I see a lot of short tutorials to create navigation menu's.But there are always little things about these tutorials I wish to change, which seem to ruin the whole result.For example this link http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu.I wanted to use this menu but I wanted the buttons to be centered.I found this tutorial http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/ but the combination does not work.The dropdown menu now becomes a horizontal menu instead of vertical and the left side of this horizontal menu starts at the left side of the screen.Since I do not think I would learn something from the solution alone for this problem, I was looking for a website of some sort with some more explanation on these topics. Also when I set the width of the second unorderd list to inherit, so (nav ul ul { width: inherit;} then it is not as wide as the button which is hovered, but slightly broader as shown in the picture below. The red line is a bit broader then the black border of the buttons in the bar. Hope that someone can help me, thanks! Greetings!

[niche]

Have you completed the w3schools tutorials css tutorials? http://www.w3schools.com/css/default.asp

[dsonesuk]

IF you have not defined a fixed width for parent menu it will default to width: auto; so assigning inherit to submenu width will mean the size will be to the width (width: auto;) of the li element with widest content widthin the submenu, also inherit in some versions of IE is not fully supported for some elements.