html css中的下拉菜单

我正在尝试创建一个下拉菜单

以下是我目前掌握的代码：

<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”和“illustrator”从“research”中下拉，当光标位于“photoshop”上时，再下拉一次。如图中红色图纸所示：

我已经找过了，但没有找到合适的答案

---

我该怎么做

你似乎对这整件事都不熟悉。由于您的标记，您所要求的不能仅用css完成。我以正确的方式为下拉菜单构建了标记。我还删除了

标记，因为您应该通过css完成样式设置，正如其他人所说（img方法非常糟糕）。请参见此处

Protip：您不需要

，而是使用CSS边框。@Dai或者，为了简单起见，字符

|

基本上只要您可以使用CSS而不是图像，您就应该，除非是太多的工作和/或太粗糙。一个

ul

是另一个

ul

的子项有效吗？上面的嵌套列表标记无效。嵌套列表应为

ul li/li/ul/li/ul