A problem with a width of the menu

HTML & CSS
1

Hi

I have a problem with a width of the menu. I want to see only one string on the line. I don’t know why it doesn’t work in jsfiddle.net: http://jsfiddle.net/8Observer8/mfZpr/2/

I want to see this:
http://i6.pixs.ru/storage/6/3/9/182png_5806145_11701639.png

instead this:
http://i6.pixs.ru/storage/6/5/4/181png_7738387_11701654.png

And I want to see this:
http://i.pixs.ru/storage/7/6/2/184png_1689722_11701762.png

instead this:
http://i.pixs.ru/storage/6/8/6/183png_8496926_11701686.png

Thanks in anvance!

2

The reason it doesn’t work in jsfiddle is because your CSS doesn’t match the HTML -


<ul id="menu">
.ui-menu {}

For the menu itself, try removing float:left; and replacing with inline-block -


ul > li { 
    position: relative;
    display: inline-block;
    width: auto !important;
}

.ui-menu ul li ul li {
    position: relative;
    display: block;
    width: auto !important;
}

You really don’t need to keep floating things left, I’m not really sure what you’re trying to achieve from it.

Side note: When you float an element, it automatically becomes display: block; … that means you don’t need to keep doing -


float: left;
display: block;

Simply do -


float: left;
3

> The reason it doesn’t work in jsfiddle is because your CSS doesn’t match the HTML
Why this works in jsfiddle? http://jsfiddle.net/8Observer8/7Bvap/227/

4

Because it’s different javascript that’s allocating the class to the menu. That method seems pointless when you could allocate the class via HTML.

5

Why do you write without “.ui-menu”?


ul > li {
    position: relative;
    display: inline-block;
    width: auto !important;
}
6

Because .ui-menu wasn’t being used. I don’t understand what you’re trying to achieve using the javascript to assign the CSS style?