Question

I have the following menu:

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

And here is my css for this menu:

.menu {
float:right;
}

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

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

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

Now, I would like to add drop down for one of the items in the menu, so I re-create the menu as follow:

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

<li class="menu_item"><a href="#"><img src="menu/arrow.png" class="menu_img" /></a>
<ul>
<li class="menu_item"><a href="mylink.php"><img src="menu/settings.png" class="menu_img" /></a></li>
<li class="menu_item"><a href="mylink.php"><img src="menu/signout.png" class="menu_img" /></a></li>
<ul/>
</li>

What changes I should I do to add the drop down on the arrow icon?

I could easily find copy paste menu, but then It will be more difficult to understand how the css drop down is created…

Regards,Zoran

Answer 1

Is this what you need ? I have removed images since i didn’t have them. Instead, I have just put some text.
http://jsfiddle.net/9ZBJG/

html:

<ul class="menu">
    <li class="menu_item">
        <a href="mylink.php">
            HOME
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            ABOUT ME
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            LISTENERS
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            FAVORITES
        </a>
    </li>
    <li class="menu_item">
        <a href="mylink.php">
            NOTIFICATIONS
        </a>
        <span class="notification_badge_count">4</span>
    </li>
    <li class="menu_item">
        <a href="#">
            ARROW
        </a>
        <ul>
            <li class="menu_item">
                <a href="mylink.php">
                    SETTINGS
                </a>
            </li>
            <li class="menu_item">
                <a href="mylink.php">
                    SIGNOUT<img src="menu/signout.png" class="menu_img" />
                </a>
            </li>
        <ul/>
    </li>
</ul>

CSS:

.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;
background-color:#f6f6f6;
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:block;
    position:absolute;
    right:0px;
    top:100%;
}

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

EXPLANATION
The structure of css menus is generally as under :

– MAIN MENU CONTAINER
• – MENU ITEM
  – SUB MENU CONTAINER
  • – SUB MENU ITEM
  • – SUB MENU ITEM

If you followed till here, great!
Now all our main menu items need to be next to each other on one line…which is why you used float:left; That’s the correct way. But .menu_item is also a class given to sub-menu-items. So I had e a few adjustments so that float:left is only taken by direct children of the main menu container.

Now the SUB-MENU in your case is a , which you have to bring under it’s parent