css - Dropdown list in line with and on top of text -

i have text 1 word clickable , upon being clicked, dropdown list of items should appear on top of text (with text staying in same place).

i thinking of using divs instead of unordered list, because feel easier position. however, open kinds of solutions.

html:

this sentence,  <div class="dropdown-list">     clickable word     <div>list item 1</div>     <div>list item 2</div>     <div>list item 3</div> </div>. plus more text fill page. 

css:

.dropdown-list {     display: inline-block;   } 

as can see in jsfiddle http://jsfiddle.net/hlyaf/8/ divs height changes , extends height of whole line, instead of dropping down on top of text.

is there way achieve desired effect?

please use tutorial have made you

http://jsfiddle.net/hlyaf/12/

body {     font-size: 20px; } .dropdown-list {     display: inline-block !important;     background: #ccc;     position:relative; } .dropdown-list div.drop {     display: none;     width:100%;     position:absolute;     left:0;     top:100%;background: #ccc; }