Rumah > Artikel > hujung hadapan web > 如何通过html和css完成下拉菜单的制作?
例如这种,当然这只是一个例子,其他的也行,如果可以,请简要说明一下用到哪些技能点和原理。
<code class="language-html"><span class="cp">
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><meta> <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></title></span>纯 CSS 多级菜单<span class="nt"></span>
<span class="nt"><style></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"></span>
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><div> <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></ul></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li> <span class="na">class=</span><span class="s">"expand"</span><span class="nt">><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></span>
<span class="nt"><ul></ul></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li> <span class="na">class=</span><span class="s">"expand"</span><span class="nt">><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>很长很长很长很长很长很长很长很长很长很长<span class="nt"></span></a></span>
<span class="nt"><ul></ul></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li> <span class="na">class=</span><span class="s">"expand"</span><span class="nt">><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>LinkLink<span class="nt"></span></a></span>
<span class="nt"><ul></ul></span>
<span class="nt"><li> <span class="na">class=</span><span class="s">"expand"</span><span class="nt">><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></span>
<span class="nt"><ul></ul></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
</li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li> <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></ul></span>
<span class="nt"><li>
<span></span>span 菜单项<span class="nt"></span>
</li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
</li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
</li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
</li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
</li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
</div></span>
<span class="nt"></span>
<span class="nt"></span>
</span></span></code>
既然你这么问了,我就当你是新手了,还好,我也是新手。<code class="language-html"><span class="cp">
<span class="nt"> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"></span>
<span class="nt"><meta> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">></span>
<span class="nt"><title></title></span>下拉菜单<span class="nt"></span>
<span class="nt"><style><span class="na">type=</style></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"></span>
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><div> <span class="na">class=</span><span class="s">"at"</span><span class="nt">></span>
<span class="nt"><div>
<span class="nt"><button> <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"></span></button></span>
<span class="nt"></span>
</div></span>
<span class="nt"><div> <span class="na">class=</span><span class="s">"ct"</span> <span class="nt">></span>
<span class="nt"><div> <span class="na">class=</span><span class="s">"dt1"</span><span class="nt">></span>下拉菜单<span class="nt"></span>
</div></span>
<span class="nt"><div> <span class="na">class=</span><span class="s">"dt"</span><span class="nt">></span>下拉菜单<span class="nt"></span>
</div></span>
<span class="nt"><div> <span class="na">class=</span><span class="s">"dt"</span><span class="nt">></span>下拉菜单<span class="nt"></span>
</div></span>
<span class="nt"><div> <span class="na">class=</span><span class="s">"dt"</span><span class="nt">></span>下拉菜单<span class="nt"></span>
</div></span>
<span class="nt"></span>
</div></span>
<span class="nt"></span>
</div></span>
<span class="nt"></span></span></span></span></code>
<code class="language-html"><span class="cp">
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><meta> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><title></title></span>css实现下拉菜单<span class="nt"></span>
<span class="nt"><style><span class="na">type=</style></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"></span>
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><div> <span class="na">id=</span><span class="s">"nav"</span><span class="nt">></span>
<span class="nt"><ul></ul></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮1<span class="nt"></span></a></li></span>
<span class="nt"><li></span>
<span class="nt"><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮2<span class="nt"></span></a></span>
<span class="nt"><ul></ul></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><li></span>
<span class="nt"><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮3<span class="nt"></span></a></span>
<span class="nt"><ul></ul></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>下拉菜单项<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮4<span class="nt"></span></a></li></span>
<span class="nt"><li><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>按钮5<span class="nt"></span></a></li></span>
<span class="nt"></span>
<span class="nt"></span>
</div></span>
<span class="nt"></span>
<span class="nt"></span>
</span></span></code>
这个是网易云课堂前端微专业的页面布局的期末测试题。
我也试一下。<code class="language-html"><span class="nt"></span>
<span class="nt"><a> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Menu<span class="nt"></span></a></span>
<span class="nt"><div> <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></ul></span>
<span class="nt"><li></span>Option 1<span class="nt"></span>
<span class="nt"><li></span>Option 2<span class="nt"></span>
<span class="nt"><li></span>Option 3<span class="nt"></span>
<span class="nt"><li></span>Option 4<span class="nt"></span>
<span class="nt"></span>
<span class="nt"></span>
</div></span>
<span class="nt"></span>
</code>
更正一点小错误,只有一个单选按钮时,选中后就不能取消选中了。所以最好用复选按钮。<code class="language-html"><span class="nt"><button></button></span>点击我出现下拉菜单<span class="nt"></span>
<span class="nt"><input> <span class="na">type=</span><span class="s">"checkbok"</span><span class="nt">></span>
<span class="nt"><div>
<span class="nt"><ul></ul></span>
<span class="nt"><li></span>XXX<span class="nt"></span>
<span class="nt"><li></span>XXX<span class="nt"></span>
<span class="nt"><li></span>XXX<span class="nt"></span>
<span class="nt"><li></span>XXX<span class="nt"></span>
<span class="nt"></span>
<span class="nt"></span>
</div></span>
</span></code>
用列表,隐藏,然后hover.的时候block就可以了
http://pepsized.com/css-only-alternative-to-the-select-element/