CSS 跨浏览器纯CSS下拉导航

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 跨浏览器纯CSS下拉导航相关的知识，希望对你有一定的参考价值。

&lt;!--# HTML #--&gt;

&lt;ul id=&quot;nav&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;

  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Products&lt;/a&gt;&lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Product 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Product 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Product 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/li&gt;

  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Service 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Service 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Service 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;!--# CSS #--&gt;

&lt;style type=&quot;text/css&quot;&gt;
#nav {
  list-style:none;
  }
#nav li {
  float:left;
  }
#nav ul {
  position:absolute;
  top:-999px;
  width:1px;
  height:1px;
  overflow:hidden;
  list-style:none;
  }
#nav ul li {
  float:none;
  }
#nav li:hover ul {
  top:auto;
  width:auto;
  height:auto;
  overflow:visible;
  }
#nav a {
  display:block;
  padding:5px 10px;
  background:#ccc;
  color:#000;
  text-decoration:none;
  }
#nav a:hover, #nav li:hover a {
  background:#666;
  color:#fff;
  }
#nav ul a {
  background:#666;
  color:#fff;
  }
#nav ul a:hover {
  background:#000;
  }
&lt;/style&gt;

&lt;!--[if lt IE 7]&gt;
&lt;style type=&quot;text/css&quot;&gt;
body {
  behavior:url(csshover3.htc); /* or equivalent */
  }
#nav li {
  display:inline;
  }
#nav ul a {
  width:8em; /* resize as appropriate */
  }
&lt;/style&gt;
&lt;![endif]--&gt;

以上是关于CSS 跨浏览器纯CSS下拉导航的主要内容，如果未能解决你的问题，请参考以下文章

纯HTML CSS制作导航栏下拉菜单

CSS CSS下拉菜单 - 跨浏览器兼容

CSS3 下拉导航

用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

二级导航下拉菜单

CSS 下拉菜单