This question already has an answer here:
这个问题在这里已有答案:
- Pure CSS multi-level drop-down menu 4 answers
纯CSS多级下拉菜单4答案
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”上时第二次下拉。如此图像中的红色图所示:
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无法实现你所要求的。我为您的标记构建了下拉菜单的正确方法。我还删除了标签,因为你应该通过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无法实现你所要求的。我为您的标记构建了下拉菜单的正确方法。我还删除了标签,因为你应该通过css完成样式,就像其他人说的那样(img方法非常糟糕)。看这里小提琴的例子