水平与垂直下拉菜单同页兼容问题求助

嘿，你遇到的问题其实很常见——两个菜单的CSS都用了全局的ul、li选择器，导致它们的样式互相覆盖，自然没法一起正常工作啦。咱们只需要给每个菜单加上专属的标识（类名），把各自的样式隔离开，就能让它们和平共处了！

一、修改垂直侧边菜单代码 #

给垂直菜单的容器加上专属类名.vertical-sidebar-menu，然后把CSS里的所有选择器都加上这个类前缀，确保样式只作用于它：

修改后的CSS #

/* 垂直侧边菜单专属样式 */
.vertical-sidebar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
  float: right;
}
.vertical-sidebar-menu ul li {
  display: block;
  position: relative;
  margin-left: -200px;
  background: #1bc2a2;
}
/* 隐藏子菜单 */
.vertical-sidebar-menu li ul {
  margin-top: -50px;
  display:none;
}
.vertical-sidebar-menu ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
.vertical-sidebar-menu ul li a:hover {
  background: #2c3e50;
}
/* hover时显示下拉菜单 */
.vertical-sidebar-menu li:hover > ul {
  display: block;
  position: absolute;
}
.vertical-sidebar-menu li:hover li {
  float: none;
}
.vertical-sidebar-menu li:hover a {
  background: #1bc2a2;
}
.vertical-sidebar-menu li:hover li a:hover {
  background: #2c3e50;
}
.vertical-sidebar-menu .main.navigation li ul li {
  border-top: 0;
}
/* 二级下拉菜单位置 */
.vertical-sidebar-menu ul ul ul {
  margin-left: -120px;
  top: 0;
}

修改后的HTML #

<div id="menu" class="vertical-sidebar-menu">
  <ul>
    <li><a>Közérdekű adatok</a></li>
    <li><a>Járóbeteg szakellátó</a></li>
    <li><a>Álláslehetőségek</a></li>
    <li><a>Közszolgálati intézmények</a></li>
    <li><a>Civil szervezetek</a></li>
    <li><a>Egyházak</a>
      <ul>
        <li><a>Református egyház</a></li>
        <li><a>Katolikus egyház</a></li>
      </ul>
    </li>
    <li><a>Idegenforgalom</a>
      <ul>
        <li><a>Térkép</a></li>
        <li><a>Vadászat</a></li>
        <li><a>Horgászat</a></li>
        <li><a>Túrázás</a></li>
        <li><a>Szálláslehetőségek</a></li>
        <li><a>Kultúrális rendezvények</a></li>
      </ul>
    </li>
    <li><a>Galéria</a></li>
    <li><a>Kiadványok</a></li>
    <li><a>Cigándi hírmondó</a></li>
    <li><a>Árapasztó tározó</a></li>
    <li><a>Gazdahírek</a></li>
    <li><a>Archívum</a></li>
    <li><a>Eladó ingatlanok</a></li>
    <li><a>Hasznos linkek</a></li>
    <li><a>Kistérség</a></li>
    <li><a>Magyar Államkincstár</a></li>
    <li><a>TÁMOP-3.2.3/A-11/1-2012-0112</a></li>
    <li><a>Cigándi Járási Hivatal</a></li>
    <li><a>ITS projekt</a></li>
    <li><a>Település üzemeltetés</a></li>
    <li><a>Művészeti csoportok</a></li>
    <li><a>ÁNYK nyomtatványok</a></li>
  </ul>
</div>

二、修改水平菜单代码 #

同样，给水平菜单的容器加上专属类名.horizontal-top-menu，并更新CSS选择器：

修改后的CSS #

/* 水平顶部菜单专属样式 */
.horizontal-top-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}
.horizontal-top-menu ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}
/* 隐藏子菜单 */
.horizontal-top-menu li ul {
  display:none;
}
.horizontal-top-menu ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
.horizontal-top-menu ul li a:hover {
  background: #2c3e50;
}
/* hover时显示下拉菜单 */
.horizontal-top-menu li:hover > ul {
  display: block;
  position: absolute;
}
.horizontal-top-menu li:hover li {
  float: none;
}
.horizontal-top-menu li:hover a {
  background: #1bc2a2;
}
.horizontal-top-menu li:hover li a:hover {
  background: #2c3e50;
}
.horizontal-top-menu .main.navigation li ul li {
  border-top: 0;
}
/* 二级下拉菜单位置 */
.horizontal-top-menu ul ul ul {
  left: 100%;
  top: 0;
}
.horizontal-top-menu {
  width: 100%;
}
.horizontal-top-menu ul:before,
.horizontal-top-menu ul:after {
  content: '';
  display:table;
  clear: both;
}

修改后的HTML #

<div id="main-navigation" class="horizontal-top-menu">
  <ul>
    <li><a>Városunk</a>
      <ul>
        <li><a>Köszöntő</a></li>
        <li><a>Földrajz</a></li>
        <li><a>Története</a></li>
        <!-- 补充完整剩余菜单项即可 -->
      </ul>
    </li>
  </ul>
</div>

这样修改之后，两个菜单的样式就完全独立了——垂直菜单的样式只会作用于带.vertical-sidebar-menu类的容器，水平菜单的样式只会作用于.horizontal-top-menu容器，它们不会再互相干扰，就能在同一页面正常展示和工作啦！

内容的提问来源于stack exchange，提问作者Zoltán Fodor