dropdown menu in html css

Question

I am trying to create a dropdown menu.

Here is the code I have so far:

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

I want "photoshop" and "illustrator" to dropdown from "research", and a second dropdown when the cursor is on "photoshop". As shown by the red drawings in this image:

menu

I have searched but I haven't found any suitable answer.

How can I do this?

Basically whenever you can use CSS instead of an image, you ought to, unless it's way too much work and/or too hacky. — David Sawyer, Sep 23 '14 at 20:15
the nested list markup is invalid above. The nested list should be as `ul li ul li /li /ul / li /ul` — BReal14, Sep 23 '14 at 20:48

score 0 · Answer 1 · answered Sep 23 '14 at 20:48

You seem to be new to this whole thing. What you are asking for can not be accomplished with css alone because of your markup. I structured your markup the correct way for a dropdown menu. I also removed the <img /> tags, because you should accomplish the styling via css, like the other people have said (the img approach is very bad). See here fiddle example

dropdown menu in html css

1 Answers1