Jump to content

Combining positioning, floating and display


Mkkl
 Share

Recommended Posts

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!

post-151115-0-13861100-1368980326_thumb.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...