목록 항목 삽입 - 드롭 다운 메뉴

Question

다음과 같은 문제가 있습니다. 하나의 메뉴 항목에 하위 메뉴가있는 간단한 메뉴가 있습니다.

그 하위 메뉴에는 두 개의 아이콘이 있습니다. 이제는 내가 가지고있는 아이콘 대신 다른 아이콘을 하나씩 표시하고 싶습니다. Howver, 나는 그렇게 할 수 없다. 여기에 내가이 시간에 가지고있는 CSS는

<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> 

:

여기 메뉴에 대한 코드입니다

당신은 폭을 설정 (충분히 큰 그것을 설정해야

.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

, 너의 하부 메뉴를 위해 최소한 두 개의 아이템의 너비와 패딩, 보더 그리고 마진의 합계)을 가져야한다. 그렇지 않으면 너비는 그 아이템의 가장 넓은 너비 (좋아하는 것 또는 설정)가 될 것이며 그들은 다른 라인에 나타날 것이다. 비록 그들이 인라인 요소이더라도.

데모 http://dabblet.com/gist/3118949