html css中的下拉菜单[重复]

时间:2021-09-01 19:40:24

This question already has an answer here:

这个问题在这里已有答案:

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:

我希望“photoshop”和“illustrator”从“研究”下拉,并在光标在“photoshop”上时第二次下拉。如此图像中的红色图所示:

html css中的下拉菜单[重复]

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

我搜索过,但我找不到合适的答案。

How can I do this?

我怎样才能做到这一点?

1 个解决方案

#1


0  

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

你似乎对这一切都是新手。由于你的标记,单独使用css无法实现你所要求的。我为您的标记构建了下拉菜单的正确方法。我还删除了html css中的下拉菜单[重复]标签,因为你应该通过css完成样式,就像其他人说的那样(img方法非常糟糕)。看这里小提琴的例子

#1


0  

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

你似乎对这一切都是新手。由于你的标记,单独使用css无法实现你所要求的。我为您的标记构建了下拉菜单的正确方法。我还删除了html css中的下拉菜单[重复]标签,因为你应该通过css完成样式,就像其他人说的那样(img方法非常糟糕)。看这里小提琴的例子