html - Google style drop down - Content bigger than parent -

this full code: https://jsfiddle.net/dv6gxtoh/2/

i want dropdown box expand , full width of it's content (so doesn't have drop things down line) don't want stretch main dropdown button same width.

the best example can give bit this:

http://i.stack.imgur.com/w3ym8.png

this css using:

* {     margin: 0;     padding: 0; } .click-nav ul {     position:relative;     display: inline-block; } .click-nav ul li {     position: relative;     list-style:none;     cursor:pointer;     display:inline-block; } .click-nav ul li ul {     position:absolute;     left:0;     right:0; } .click-nav ul .clicker {     position:relative;     color:black; } .click-nav ul .clicker:hover, .click-nav ul .active {     background:#196f9a; } .click-nav ul li {     display:block;     padding:8px 10px;     background:#fff;     color:#333;     text-decoration:none; } .click-nav ul li a:hover {     background:#f2f2f2; } /* fallbacks */  .click-nav .no-js ul {     display:none; } .click-nav .no-js:hover ul {     display:block; } 

the closest remove position:relative; .click-nav ul trick, except dropdown menu doesn't sit under button opened it.

any appreciated.

seems me white-space : nowrap need, i.e

.click-nav ul li {     display:block;     padding:8px 10px;     background:#fff;     color:#333;     text-decoration:none;     white-space: nowrap; } 

forked fiddle -> http://jsfiddle.net/j5ckepbm/