如何通过html和css完成下拉菜单的制作?
例如这种,当然这只是一个例子,其他的也行,如果可以,请简要说明一下用到哪些技能点和原理。
回复内容:
几个下拉菜单display:none按钮 :hover 给下拉菜单display:block
也许可以 无脚本,纯HTML和 CSS 实现的多级下拉菜单,在非 IE 内核浏览器和 IE8+ 表现完美。

主体使用ul>li>ul>li>......嵌套定义多级。
<span class="cp"><!DOCTYPE HTML></span> <span class="nt"><html></span> <span class="nt"><head></span> <span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Content-Type"</span> <span class="na">content=</span><span class="s">"text/html; charset=utf-8"</span><span class="nt">></span> <span class="nt"><title></span>纯 CSS 多级菜单<span class="nt"></title></span> <span class="nt"><style></span> <span class="nc">.menu</span><span class="p">{}</span> <span class="nc">.menu</span> <span class="nt">ul</span><span class="o">,</span><span class="nc">.menu</span> <span class="nt">li</span><span class="p">{</span><span class="k">margin</span><span class="o">:</span><span class="m">0</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span><span class="m">0</span><span class="p">;</span><span class="k">list-style</span><span class="o">:</span><span class="k">none</span> <span class="k">outside</span><span class="p">;}</span> <span class="nc">.menu</span><span class="o">></span><span class="nt">ul</span><span class="p">{</span><span class="k">overflow</span><span class="o">:</span><span class="k">auto</span><span class="p">;</span> <span class="k">display</span><span class="o">:</span><span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;}</span> <span class="nc">.menu</span> <span class="nt">a</span><span class="o">,</span><span class="nc">.menu</span> <span class="nt">span</span><span class="p">{</span> <span class="k">cursor</span><span class="o">:</span><span class="k">default</span><span class="p">;</span> <span class="k">height</span><span class="o">:</span><span class="m">30px</span><span class="p">;</span> <span class="k">line-height</span><span class="o">:</span><span class="m">30px</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span><span class="m">0</span> <span class="m">5px</span><span class="p">;</span> <span class="k">display</span><span class="o">:</span><span class="k">block</span><span class="p">;</span> <span class="k">text</span><span class="o">-</span><span class="k">overflow</span><span class="o">:</span><span class="n">ellipsis</span><span class="p">;</span> <span class="k">overflow</span><span class="o">:</span><span class="k">hidden</span><span class="p">;</span> <span class="k">text-decoration</span><span class="o">:</span><span class="k">none</span><span class="p">;</span> <span class="k">color</span><span class="o">:</span><span class="n">MenuText</span><span class="p">;}</span> <span class="nc">.menu</span> <span class="nt">a</span><span class="nd">:hover</span><span class="o">,</span><span class="nc">.menu</span> <span class="nt">span</span><span class="nd">:hover</span><span class="o">,</span><span class="nc">.menu</span> <span class="nt">li</span><span class="nd">:hover</span><span class="o">></span><span class="nt">a</span><span class="o">,</span><span class="nc">.menu</span> <span class="nt">li</span><span class="nd">:hover</span><span class="o">></span><span class="nt">span</span><span class="p">{</span><span class="k">color</span><span class="o">:</span><span class="n">HighlightText</span><span class="p">;}</span> <span class="nc">.menu</span> <span class="nt">li</span><span class="nd">:hover</span><span class="p">{</span><span class="k">background-color</span><span class="o">:</span><span class="n">Highlight</span><span class="p">;}</span> <span class="nc">.menu</span> <span class="nt">li</span><span class="nd">:hover</span><span class="o">></span><span class="nt">ul</span><span class="p">{</span><span class="k">display</span><span class="o">:</span><span class="k">block</span><span class="p">;}</span> <span class="nc">.menu</span><span class="o">></span><span class="nt">ul</span><span class="o">></span><span class="nt">li</span><span class="p">{</span><span class="k">float</span><span class="o">:</span><span class="k">left</span><span class="p">;}</span> <span class="nc">.menu</span><span class="o">></span><span class="nt">ul</span><span class="o">></span><span class="nt">li</span> <span class="nt">ul</span><span class="p">{</span><span class="k">display</span><span class="o">:</span><span class="k">none</span><span class="p">;</span><span class="k">float</span><span class="o">:</span><span class="k">left</span><span class="p">;</span> <span class="k">background-color</span><span class="o">:</span><span class="m">#fff</span><span class="p">;</span> <span class="k">border</span><span class="o">:</span><span class="m">1px</span> <span class="k">solid</span> <span class="n">Highlight</span><span class="p">;</span> <span class="k">position</span><span class="o">:</span><span class="k">absolute</span><span class="p">;}</span> <span class="nc">.menu</span><span class="o">></span><span class="nt">ul</span><span class="o">></span><span class="nt">li</span> <span class="nt">li</span><span class="p">{</span><span class="k">padding-left</span><span class="o">:</span><span class="m">25px</span><span class="p">;</span><span class="k">margin</span><span class="o">:</span><span class="m">2px</span><span class="p">;</span><span class="k">background</span><span class="o">:</span><span class="k">transparent</span> <span class="sx">url(data:image/gif;base64,R0lGODlhEAAQAIAAAJmZmf///yH5BAAAAAAALAAAAAAQABAAAAIjhI9pwe2+nmRRIQrmjBrmYB1Y93Ak+IXVd6LtiIZwa5JqWAAAOw==)</span> <span class="k">no-repeat</span> <span class="m">5px</span> <span class="k">center</span><span class="p">;</span> <span class="k">width</span><span class="o">:</span><span class="m">150px</span><span class="p">;}</span> <span class="nc">.menu</span><span class="o">></span><span class="nt">ul</span><span class="o">></span><span class="nt">li</span><span class="o">></span><span class="nt">ul</span><span class="o">></span><span class="nt">li</span> <span class="nt">ul</span><span class="p">{</span><span class="k">margin-left</span><span class="o">:</span><span class="m">140px</span><span class="p">;</span> <span class="k">margin-top</span><span class="o">:-</span><span class="m">30px</span><span class="p">;}</span> <span class="nc">.menu</span> <span class="nt">li</span><span class="nc">.expand</span><span class="o">></span><span class="nt">a</span><span class="o">,</span><span class="nc">.menu</span> <span class="nt">li</span><span class="nc">.expand</span><span class="o">></span><span class="nt">span</span><span class="p">{</span><span class="k">background</span><span class="o">:</span><span class="k">transparent</span> <span class="sx">url(data:image/png;base64,R0lGODlhAwAQAIABAAAAAP///yH5BAEAAAEALAAAAAADABAAAAIKjI8JBtv/wko0FQA7)</span> <span class="k">no-repeat</span> <span class="k">right</span> <span class="k">center</span><span class="p">;</span> <span class="k">padding-right</span><span class="o">:</span><span class="m">10px</span><span class="p">;</span> <span class="k">margin-right</span><span class="o">:</span><span class="m">5px</span><span class="p">;}</span> <span class="nc">.menu</span><span class="o">></span><span class="nt">ul</span><span class="o">></span><span class="nt">li</span><span class="nc">.expand</span><span class="o">></span><span class="nt">a</span><span class="o">,</span><span class="nc">.menu</span><span class="o">></span><span class="nt">ul</span><span class="o">></span><span class="nt">li</span><span class="nc">.expand</span><span class="o">></span><span class="nt">span</span><span class="p">{</span> <span class="k">background-image</span><span class="o">:</span><span class="sx">url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAADCAYAAACwAX77AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAaSURBVBhXY2BgYPiPAwOFMSXBgjAA0wnmAwASVQv19UVKmwAAAABJRU5ErkJggg==)</span><span class="p">;}</span> <span class="nt"></style></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><div</span> <span class="na">id=</span><span class="s">"mainnav"</span> <span class="na">class=</span><span class="s">"menu"</span><span class="nt">></span> <span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li</span> <span class="na">class=</span><span class="s">"expand"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span> <span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li</span> <span class="na">class=</span><span class="s">"expand"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>很长很长很长很长很长很长很长很长很长很长<span class="nt"></a></span> <span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li</span> <span class="na">class=</span><span class="s">"expand"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>LinkLink<span class="nt"></a></span> <span class="nt"><ul></span> <span class="nt"><li</span> <span class="na">class=</span><span class="s">"expand"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span> <span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li</span> <span class="na">class=</span><span class="s">"expand"</span><span class="nt">><span></span>span 菜单项<span class="nt"></span></span> <span class="nt"><ul></span> <span class="nt"><li><span></span>span 菜单项<span class="nt"></span></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></div></span> <span class="nt"></body></span> <span class="nt"></html></span>
下面开说:
感觉用select标签效果好像不是很好,效果如下:

首先复习一下基本知识:
display:



代码如下:

希望大神们能批评指正
最后的效果如图:

<span class="cp"><!DOCTYPE html></span> <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> <span class="nt"><head></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span> <span class="nt"><title></span>下拉菜单<span class="nt"></title></span> <span class="nt"><style </span><span class="na">type=</span><span class="s">"text/css"</span><span class="nt">></span> <span class="nc">.bt</span><span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span><span class="k">height</span><span class="o">:</span> <span class="m">28px</span><span class="p">;</span> <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#ddd</span><span class="p">;</span> <span class="k">background-color</span><span class="o">:</span> <span class="m">#eee</span><span class="p">;</span> <span class="k">font</span><span class="o">:</span><span class="m">12px</span> <span class="s2">"宋体"</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.ct</span><span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;}</span> <span class="nc">.dt</span><span class="p">{</span> <span class="k">height</span><span class="o">:</span> <span class="m">30px</span><span class="p">;</span> <span class="k">margin-top</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span> <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#ddd</span><span class="p">;</span> <span class="k">background-color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span><span class="k">auto</span> <span class="m">10px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.dt1</span><span class="p">{</span> <span class="k">height</span><span class="o">:</span> <span class="m">30px</span><span class="p">;</span> <span class="k">margin-top</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span> <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#ddd</span><span class="p">;</span> <span class="k">background-color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span><span class="k">auto</span> <span class="m">10px</span><span class="p">;}</span> <span class="nc">.dt</span><span class="nd">:hover</span><span class="o">,</span><span class="nc">.dt1</span><span class="nd">:hover</span><span class="p">{</span><span class="k">background-color</span><span class="o">:</span> <span class="m">#ddd</span><span class="p">;}</span> <span class="nc">.bt</span><span class="nd">:hover</span><span class="p">{</span><span class="k">background-color</span><span class="o">:</span> <span class="nb">green</span><span class="p">;}</span> <span class="nc">.at</span><span class="nd">:hover</span> <span class="nc">.ct</span><span class="p">{</span><span class="k">display</span><span class="o">:</span> <span class="k">inline</span><span class="o">-</span><span class="k">block</span><span class="p">;}</span> <span class="nt"></style></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"at"</span><span class="nt">></span> <span class="nt"><div></span> <span class="nt"><button</span> <span class="na">class=</span><span class="s">"bt"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="nt">></span>按钮<span class="nt"></button></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"ct"</span> <span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"dt1"</span><span class="nt">></span>下拉菜单<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"dt"</span><span class="nt">></span>下拉菜单<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"dt"</span><span class="nt">></span>下拉菜单<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"dt"</span><span class="nt">></span>下拉菜单<span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></body></span> <span class="nt"></html></span>
做这个功能不难,难的是如何封装和复用。
个人看好polymer这种解决方案。
<span class="cp"><!DOCTYPE html></span> <span class="nt"><html></span> <span class="nt"><head></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span> <span class="nt"><title></span>css实现下拉菜单<span class="nt"></title></span> <span class="nt"><style </span><span class="na">type=</span><span class="s">"text/css"</span><span class="nt">></span> <span class="o">*</span><span class="p">{</span> <span class="k">margin</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#nav</span><span class="p">{</span> <span class="k">background-color</span><span class="o">:</span> <span class="m">#eee</span><span class="p">;</span> <span class="k">width</span><span class="o">:</span> <span class="m">300px</span><span class="p">;</span> <span class="k">height</span><span class="o">:</span> <span class="m">40px</span><span class="p">;</span> <span class="k">margin</span><span class="o">:</span> <span class="m">0</span> <span class="k">auto</span><span class="p">;</span> <span class="p">}</span> <span class="nt">ul</span><span class="p">{</span> <span class="k">list-style</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="p">{</span> <span class="k">float</span><span class="o">:</span> <span class="k">left</span><span class="p">;</span> <span class="k">line-height</span><span class="o">:</span> <span class="m">40px</span><span class="p">;</span> <span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span> <span class="p">}</span> <span class="nt">a</span><span class="p">{</span> <span class="k">text-decoration</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">color</span><span class="o">:</span><span class="m">#000</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span> <span class="m">0</span> <span class="m">10px</span><span class="p">;</span> <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span> <span class="p">}</span> <span class="nt">a</span><span class="nd">:hover</span><span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="m">#fff</span><span class="p">;</span> <span class="k">background-color</span><span class="o">:</span> <span class="m">#666</span><span class="p">;</span> <span class="p">}</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="nt">ul</span> <span class="nt">li</span><span class="p">{</span> <span class="k">float</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="k">background-color</span><span class="o">:</span> <span class="m">#eee</span><span class="p">;</span> <span class="k">margin-top</span><span class="o">:</span> <span class="m">2px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="nt">ul</span> <span class="p">{</span> <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="nt">ul</span> <span class="nt">li</span> <span class="nt">a</span><span class="nd">:hover</span><span class="p">{</span> <span class="k">background-color</span><span class="o">:</span> <span class="m">#06f</span><span class="p">;</span> <span class="p">}</span> <span class="nt">ul</span> <span class="nt">li</span><span class="nd">:hover</span> <span class="nt">ul</span><span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span> <span class="p">}</span> <span class="nt"></style></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><div</span> <span class="na">id=</span><span class="s">"nav"</span><span class="nt">></span> <span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮1<span class="nt"></a></li></span> <span class="nt"><li></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮2<span class="nt"></a></span> <span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> <span class="nt"><li></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮3<span class="nt"></a></span> <span class="nt"><ul></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮4<span class="nt"></a></li></span> <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮5<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"></div></span> <span class="nt"></body></span> <span class="nt"></html></span>
这里大部分答案都是hover事件触发下拉菜单出现。其实我总觉得这样不太自然,所以我尽力去做成(伪)点击触发。
---------------------------------------------------------------------
# 具体想法:
菜单是, 下拉菜单的容器是
然后利用a:focus + .dropdown{ ... } 来实现。
---------------------------------------------------------------------
要点1:CSS如何实现影响其他元素?
看这里 > html - How to affect other elements when a div is hovered
要点2: 如何做出(伪)点击触发?
基本用 a:focus,个人感觉自然一点。当然如果失去焦点,下拉菜单容器也会相应地隐藏。
--------------------------------------------------------------------
# HTML BODY 部分代码:
<span class="nt"><body></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Menu<span class="nt"></a></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"drop-down"</span> <span class="na">id=</span><span class="s">"drop-down"</span><span class="nt">></span> <span class="nt"><ul></span> <span class="nt"><li></span>Option 1<span class="nt"></li></span> <span class="nt"><li></span>Option 2<span class="nt"></li></span> <span class="nt"><li></span>Option 3<span class="nt"></li></span> <span class="nt"><li></span>Option 4<span class="nt"></li></span> <span class="nt"></ul></span> <span class="nt"></div></span> <span class="nt"></body></span>
原答案如下
===========================
楼上有同学写了css用伪类:hover实现的下拉菜单 这是一种 我再补充下
下拉菜单抛开样式的不同 交互上无非两种
鼠标移到button上出现菜单(如楼上)
以及点击后出现菜单(我要说的)
题主问的是html+css 而很多同学提到了用js添加click事件 这也是大多数下拉菜单的做法
不过为了不跑题 就只用html+css 不用js 那就考css基本功了
这里简单说下思路
html结构如下
<span class="nt"><button></span>点击我出现下拉菜单<span class="nt"></button></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbok"</span><span class="nt">></span> <span class="nt"><div></span> <span class="nt"><ul></span> <span class="nt"><li></span>XXX<span class="nt"></li></span> <span class="nt"><li></span>XXX<span class="nt"></li></span> <span class="nt"><li></span>XXX<span class="nt"></li></span> <span class="nt"><li></span>XXX<span class="nt"></li></span> <span class="nt"></ul></span> <span class="nt"></div></span>
如果想用纯css实现click效果:
http://tympanus.net/codrops/2012/12/17/css-click-events/

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

运行 H5 项目需要以下步骤:安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境,创建项目文件夹、初始化项目、编写代码。启动开发服务器,使用命令行运行命令。在浏览器中预览项目,输入开发服务器 URL。发布项目,优化代码、部署项目、设置 Web 服务器配置。

H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术,创建跨平台兼容的网页。其核心在于浏览器解析代码,渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误,应使用开发者工具调试;而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等,以提高加载速度和代码质量。

制作 H5 点击图标的步骤包括:在图像编辑软件中准备方形源图像。在 H5 编辑器中添加交互性,设置点击事件。创建覆盖整个图标的热点。设置点击事件的操作,如跳转页面或触发动画。导出 H5 文档为 HTML、CSS 和 JavaScript 文件。将导出的文件部署到网站或其他平台。

是的,H5页面制作是前端开发的重要实现方式,涉及HTML、CSS和JavaScript等核心技术。开发者通过巧妙结合这些技术,例如使用<canvas>标签绘制图形或使用JavaScript控制交互行为,构建出动态且功能强大的H5页面。

H5(HTML5)适合应用于轻量级应用,如营销活动页面、产品展示页面和企业宣传微网站。它优势在于跨平台性和丰富的交互性,但局限性在于复杂的交互和动画、本地资源访问和离线功能。

H5不是独立编程语言,而是HTML5、CSS3和JavaScript的集合,用于构建现代Web应用。1.HTML5定义网页结构和内容,提供新标签和API。2.CSS3控制样式和布局,引入动画等新特性。3.JavaScript实现动态交互,通过DOM操作和异步请求增强功能。

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5 弹窗制作步骤:1. 确定触发方式(点击式、时间式、退出式、滚动式);2. 设计内容(标题、正文、行动按钮);3. 设置样式(大小、颜色、字体、背景);4. 实现代码(HTML、CSS、JavaScript);5. 测试和部署。
