I'm having some issues with this dropdown menu. http://jsfiddle.net/vnr0rbuu/2/
The problem arises when using a different mouse or a PC, as the scrollbar appears and my list items don't apply the inline-block style correctly.
Any suggestions on how to fix this?
This is my HTML:
<ul class="app-dropdown">
<li class="app">
<ul class="app-list">
<li class="app-name">
<p>Android Application With a really long name</p>
</li>
<li class="app-icon">
<img src=""/>
</li>
</ul>
</li>
<li class="app">
<ul class="app-list">
<li class="app-name">
<p>Frustrating situation</p>
</li>
<li class="app-icon">
<img src=""/>
</li>
</ul>
</li>
</ul>
And here is my CSS:
.app-dropdown {
display: block;
position: absolute;
min-width: 160px;
max-width: 300px;
max-height: 350px;
margin: 15px;
}
.app {
display: block;
padding: 15px 25px;
border-bottom: 1px solid #F4F4F4;
vertical-align: middle;
text-align: right;
}
.app-list {
display: inline-block;
}
.app-name {
padding-right: 5px;
display: inline-block;
vertical-align: middle;
}
.app-name p { /* Truncate long name */
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-icon {
display: inline-block;
}
.app-icon img {
border-radius: 3px;
display: inline-block;
vertical-align: middle;
}