創建包含圖片的下拉菜單

Question

我想創建一個下拉菜單，它適用於移動設備（我正在使用媒體查詢）平臺。 我能夠創建媒體查詢，使其只能在320/480/720px上工作，但我無法創建此子菜單類，並具有下拉菜單。

任何提示或教程，我可以看到？任何幫助，將不勝感激......

我的小提琴：http://jsfiddle.net/KZ7p9/2/

HTML

<div class="header"> 
       <div class="menu"> 
        <ul> 
         <li><a href="#"><img src="www.wemadeyou.pt/img/menu.png" alt="Menu" width="22" height="17"/></a> 
          <ul class="sub-menu"> 
           <li><a href="#">Home</a></li> 
           <li><a href="#">Portfolio</a></li> 
           <li><a href="#">Services</a></li> 
           <li><a href="#">About</a></li> 
           <li><a href="#">Contacts</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div>   
</div> 

CSS

.header{ 
    position: relative; 
    width: 100%; 
    height: 50px; 
    margin: 0 auto; 
    padding: 0; 
    display: block; 
    text-align: center; 
    margin-bottom: 25px; 
    background-color: rgba(0, 0, 0, 0.2); 
} 

.menu{} 

Answer 1

好@uniqezor我不便^^ 外觀：

<div class="header"> 
    <div class="menu"> 
     <ul> 
      <li><a href="#"><img src="www.wemadeyou.pt/img/menu.png" alt="Menu" width="22" height="17"/></a> 
       <ul class="sub-menu"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contacts</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

    <div class="topmenu container clearfix"> 
     <div class="top"> 
      <a href="#" class="logo"> 
       <img src="http://wemadeyou.pt/img/logo.png" alt="WeMadeYou - Future Together" class="logo" width="65" 
        height="21" itemprop="image"/> 
      </a> 
      <span class="textbox">This is what we made of you!</span> 

      <div class="clear"></div> 

      <div class="nav"> 
       <ul> 
        <li><a href="index.html" id="home">Home</a></li> 
        <li><a href="#">Portfolio</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contacts</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 




.header{ 
    position: relative; 
    width: 100%; 
    height: 50px; 
    margin: 0 auto; 
    padding: 0; 
    display: block; 
    text-align: center; 
    margin-bottom: 25px; 
    background-color: rgba(0, 0, 0, 0.2); 
} 

.logo{ 
    float: left; 
    margin-top: 6px; 
    margin-right: 10px; 
    margin-left: 5px; 
} 

.topmenu{ 
    text-align: center; 
    height: 50px; 
    margin: 0 auto; 
} 

.top{ 
    display: inline; 
    padding: 0; 
} 

span.textbox{ 
    display: inline; 
    float: left; 
    font-size: 13px; 
    margin-top: 14px; 
    color: white; 
    font-weight: bold; 
} 

.nav{ 
    float: right; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    margin-left: auto; 
    margin-right: auto; 
} 

.nav ul{margin: 0;} 

.nav li{ 
    width: 100px; 
    height: 50px; 
    display: inline-block; 
    float: right; 
    margin-right: 5px; 
} 

.nav li a{ 
    height: 40px; 
    color: white; 
    font-size: 12px; 
    font-weight: bold; 
    text-decoration: none; 
    text-transform: uppercase; 
    line-height: 48px; 
    padding: 16px 20px 14px 20px; 
} 

.nav li a#home{ 
    height: 40px; 
    padding: 16px 30px 14px 30px; 
} 

.nav li a:hover{border-bottom:thick solid #fff;} 

.menu{display: none; } 

@media screen and (max-width: 294px) { 
    span.textbox { 
    font-size: 10px; 

}} 
@media screen and (max-width: 859px) { 
.clear{clear: both} 
.nav{float: left;max-width: 100%;width: 100%;} 
.nav li {display: block;width: 100%; 
float: none;margin: 0 auto;} 
.nav ul{padding: 0} 
.nav li a{color:black} 
}