下拉菜單中的HTML css

Question

我想創建一個下拉菜單。

這裏是我到目前爲止的代碼：

<div class="men_tp"> 
     <a href="index.html">HOME</a> <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
     <a href="About Us.html">ABOUT US</a> <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
     <a href="#">TRAINING</a> <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
     <a href="#">PUBLISHING</a> <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
     <a href="#">CONFERENCES</a> <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
     <a href="#">RESEARCH</a> <img src="images/line.gif" width="2" height="14" alt="" class="flt" style="margin-left:20px;" /> 
     <ul> 
       <li><a href="#">Photoshop</a></li> 
       <li><a href="#">Illustrator</a></li> 
       <li><a href="#">Web Design</a></li> 
       <ul> 
         <li><a href="#">HTML</a></li> 
         <li><a href="#">CSS</a></li> 
       </ul> 
     </ul> 
     <a href="#">CONTACT US</a> 
</div> 

我想「的Photoshop」和「插畫」，從「研究」下拉菜單中，和第二個下拉當光標停留在「的Photoshop」。作爲該圖像中所示的紅色附圖中：

我已經搜索但我還沒有找到任何合適的答案。

我該怎麼做？

Answer 1

你似乎是這個整體的新事物。由於您的標記，您所要求的內容無法單獨由css完成。我爲您的標記構建下拉菜單的正確方法。我還刪除了<img />標籤，因爲您應該像其他人所說的那樣通過css完成樣式（img方法非常糟糕）。見這裏fiddle example