Question

I have the following problem: I have a simple menu, where only one menu item has sub-menu underneath.

In that sub menu, I have two icons, and I want to display them one next to otehr, instead as I have them now, one under another. Howver, I cant manage to do that.

Here is the code for the menu:

    <ul class="menu">
    <li class="menu_item"><a href="link.php"><img src="home.png" class="menu_img"/></a></li>
    <li class="menu_item"><a href="link.php"><img src="me.png" class="menu_img"/></a></li>
    <li class="menu_item"><a href="link.php"><img src="listeners.png" class="menu_img"/></a></li>                   
    <li class="menu_item"><a href="link.php"><img src="notifications.png" class="menu_img" /></a> <span class="notification_badge_count"></span></li>
    <li class="menu_item"><a href="link.php"><img src="signout.png"  class="menu_img" /></a></li>

    <li class="menu_item"><a href="#"><img src="arrow.png" alt="Edit Profile / Sign Out" title="Edit Profile / Sign Out" class="menu_img" /></a>
        <ul>
            <li class="menu_item"><a href="link.php"><img src="favorites.png" class="menu_img" /></a></li>
            <li class="menu_item"><a href="link.php"><img src="settings.png"  class="menu_img" /></a></li>
        </ul>
    </li>
</ul>

Here is the css that I have at this time:

.menu {
    float:right;
}

.menu_item{
    background: rgba(0, 0, 0, 0.0);
}

.menu > li.menu_item{
    float:left;
    height:25px;
    padding:24px 10px 0 10px;
    text-align: center;
    font-size:12px;
    position:relative;
}

.menu_item ul{
    display:none;
}

.menu_img {
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

.menu_item ul{
    display:none;
}

.menu_item:hover ul{
    display:inline;
    position:absolute;
    right:0px;
    top:100%;
   background: url("/assets/images/menu.jpg") repeat scroll 0 0 transparent;
}

.menu_item ul li{
    background-color:#f6f6f6;
    padding:5px; 
   display:inline;
}

Answer 1

You need to set a width (and set it big enough, at least the sum of the widths of the two items plus paddings, borders and margins) for your submenu, otherwise its width will be the width of the widest of its items (either favourite or settings) and they will be shown on different lines, even though they are inline elements.

Demo http://dabblet.com/gist/3118949