Question

learning html/css here. I can’t seem to understand how to tweak this drop down menu. I’m trying have to tweak it to hold an image and a name, then to have the links.

Right now the image is getting cut off due to the <li> height, when I change the <li> height to 100% it get some weird behavior that I don’t understand. Any help would be really appreciated to learn whats going on.

image getting cut off

http://jsfiddle.net/FyU89/

odd behavior after I add height: 100%

.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
height: 100%
} 

http://jsfiddle.net/FyU89/1/

Answer 1

Add to your css

ul.menu-drop li {
    display: inline-block;
}

Fiddle link

Update:
Upon adding the new css rule you’ll find the name disappears from next to the image on Chrome, at least it does for me. To fix that add a float: left on your image and the name will appear next to the image on Chrome, Firefox, and IE; you can then style it more to your liking. Fiddle link with the float change.