如何在 Blogger 的下拉导航 css 中向子菜单添加第二级

【问题标题】：How to add second level to a submenu in a dropdown navigation css in Blogger如何在 Blogger 的下拉导航 css 中向子菜单添加第二级
【发布时间】：2017-03-26 01:44:11
【问题描述】：

我真的在为我的模板苦苦挣扎。这是我当前用于导航菜单的 CSS。我已经尝试了几件事，但没有给我第二个子菜单，它会在我已经打开的下拉列表的右侧弹出。谁能帮我插入代码以允许第二次弹出？谢谢！！！

/* CSS Main Menu */

#menu-wrapper {
  background: #353535;
  height: 50px;
  width: 100%;
  position: relative;
  z-index: 99;
}

#menu {
  color: #fff;
  height: 50px;
  max-width: 1100px;
  margin: 0 auto;
  -webkit-transform: translateZ(0);
}

#menu ul,
#menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu ul {
  height: 50px
}

#menu li {
  float: left;
  display: inline;
  position: relative;
  font-family: 'Oswald';
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

#menu li a {
  color: #fff;
}

#menu a {
  display: block;
  line-height: 50px;
  padding: 0 20px;
  margin: 0;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s ease-in-out;
}

#menu li:hover > a {
  color: #f8a82a;
}

#menu li a:hover {
  color: #f8a82a;
}

#menu input {
  display: none;
  margin: 0;
  padding: 0;
  width: 80px;
  height: 50px;
  opacity: 0;
  cursor: pointer
}

#menu label {
  font-family: 'Oswald';
  font-size: 30px;
  font-weight: 400;
  width: 35px;
  height: 51px;
  line-height: 51px;
  text-align: center
}

#menu label span {
  font-size: 13px;
  position: absolute;
  left: 35px
}

#menu ul.menus {
  visibility: hidden;
  opacity: 0;
  height: auto;
  overflow: hidden;
  min-width: 166px;
  background: #fff;
  position: absolute;
  z-index: 99;
  color: #aaa;
  top: 50px;
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

#menu li:hover > ul.menus {
  visibility: visible;
  opacity: 1;
  -moz-transform: scale(1.0);
  -o-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}

#menu a.ai,
#menu a.trigger2 {
  padding: 0 27px 0 14px;
  transition: all 0.3s linear;
}

#menu > li:hover > a.ai,
#menu a.ai:hover {
  background: transparent;
  color: #f8a82a;
}

#menu li > a.ai::after {
  content: "\f0d7";
  font-family: FontAwesome;
  margin: 0 auto;
  width: 10px;
  height: 10px;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 10px;
}

#menu ul.menus a {
  background: #fff;
  color: #999;
  border-bottom: 1px solid #f0f0f0;
  margin: 0;
  transition: all 0.2s linear;
}

#menu ul.menus a:hover {
  background: #f8a82a;
  color: #fff;
  transition: all .1s linear;
}

#menu ul.menus li {
  display: block;
  width: 100%;
  font-family: 'Lato';
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
}

#menu ul.menus li a:before {
  visibility: hidden;
  opacity: 0;
  content: "\f061";
  font-family: FontAwesome;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  top: 0;
  left: 35px;
  margin-right: 10px;
  position: absolute;
  padding: 0;
  color: #fff;
  transition: all 0.2s ease-in-out;
}

#menu ul.menus li a:hover:before {
  left: 10px;
  visibility: visible;
  opacity: 1;
}

#menu ul.menus li:hover {
  width: 100%;
}

#menu ul.menus li:last-child {
  border-bottom: none;
}

#menu ul.menus li:first-child a {
  border-top: none;
}

#menu ul.menus li:last-child a {
  border-bottom: none;
}

#menu ul.menus > li:hover > a {
  background: #f8a82a;
  color: #fff;
  padding-left: 25px;
  transition: all 0.1s linear;
}

#menu .ranpost {
  cursor: pointer;
  float: right;
}

#menu .ranpost:hover {
  background-color: transparent!important;
}

#menu ul.menusub a {
  background: #fff;
  color: #999;
  border-bottom: 1px solid #f0f0f0;
  margin: 0;
  transition: all 0.2s linear;
}

#menu ul.menusub a:hover {
  background: #f8a82a;
  color: #fff;
  transition: all .1s linear;
}

#menu ul.menusub li {
  display: block;
  width: 100%;
  font-family: 'Lato';
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
}

#menu ul.menusub li a:before {
  visibility: hidden;
  opacity: 0;
  content: "\f061";
  font-family: FontAwesome;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  top: 0;
  left: 35px;
  margin-right: 10px;
  position: absolute;
  padding: 0;
  color: #fff;
  transition: all 0.2s ease-in-out;
}

#menu ul.menusub li a:hover:before {
  left: 10px;
  visibility: visible;
  opacity: 1;
}

#menu ul.menusub li:hover {
  width: 100%;
}

#menu ul.menusub li:last-child {
  border-bottom: none;
}

#menu ul.menusub li:first-child a {
  border-top: none;
}

#menu ul.menusub li:last-child a {
  border-bottom: none;
}

#menu ul.menusub > li:hover > a {
  background: #f8a82a;
  color: #fff;
  padding-left: 25px;
  transition: all 0.1s linear;
}

#menu .ranpost {
  cursor: pointer;
  float: right;
}

#menu .ranpost:hover {
  background-color: transparent!important;
}
<div id='menu-wrapper'>
  <div class='content-wrapper'>
    <nav id='menu'>
      <input type='checkbox' />
      <label/>
      <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Static Page</a></li>
        <li><a class='ai' href='#'>Dropmenu</a>
          <ul class='menus'>
            <li><a href='#'>Dropmenu 1</a></li>
            <li><a href='#'>Dropmenu 2</a></li>
            <li><a href='#'>Dropmenu 3</a></li>
            <li><a href='#'>Dropmenu 4</a></li>
            <li><a href='#'>Dropmenu 5</a></li>
          </ul>
        </li>
        <li><a class='ai' href='#'>Dropmenu</a>
          <ul class='menus'>
            <li><a href='#'>Dropmenu 1</a></li>
            <li><a href='#'>Dropmenu 2</a></li>
            <li><a href='#'>Dropmenu 3</a></li>
            <li><a href='#'>Dropmenu 4</a></li>
            <li><a href='#'>Dropmenu 5</a></li>
          </ul>
        </li>
        <li><a class='ai' href='#'>Dropmenu</a>
          <ul class='menus'>
            <li><a href='#'>Dropmenu 1</a></li>
            <li><a href='#'>Dropmenu 2</a></li>
            <li><a href='#'>Dropmenu 3</a></li>
            <li><a href='#'>Dropmenu 4</a></li>
            <li><a href='#'>Dropmenu 5</a></li>
          </ul>
        </li>
        <li><a href='#'>Button</a></li>
        <li><a href='#'>Error</a></li>
        <li class='ranpost'>
          <a onclick='feelingLucky();'><i/>Surprise Me</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<div class='clear' />

【问题讨论】：

  • 嗯，为什么你的代码中有&amp;quot & &amp;gt;？如果你用纯文本发布你的 CSS 代码，我可能会帮助你。
  • 那是在博主的实际代码中，信不信由你。如果您可以访问博客，如果有帮助，我可以邀请您访问我的博客。感谢您提供的任何帮助。
  • 你能打开开发者工具并从那里复制css文件吗？
  • 我试试看。正如你所见，我不擅长这些东西。 :s
  • 根本没有版权。 testblogdtc57.blogspot.com 问题可能比它的价值更大。

标签： css navigation blogger


【解决方案1】：

好的，如果您编辑 HTML 和 CSS，您可以这样做：

HTML

其中一个 HTML 下拉菜单如下所示：

<li><a class='ai' href='#'>Dropmenu</a>
  <ul class='menus'>
    <li><a href='#'>Dropmenu 1</a></li>
    <li><a href='#'>Dropmenu 2</a></li>
    <li><a href='#'>Dropmenu 3</a></li>
    <li><a href='#'>Dropmenu 4</a></li>
    <li><a href='#'>Dropmenu 5</a></li>
  </ul>
</li>

在Dropmenu&lt;/a&gt;标签后添加这段代码：

  <ul class='menus'>
    <li><a href='#'>Dropmenu 1</a></li>
    <li><a href='#'>Dropmenu 2</a></li>
    <li><a href='#'>Dropmenu 3</a></li>
    <li><a href='#'>Dropmenu 4</a></li>
    <li><a href='#'>Dropmenu 5</a></li>
  </ul>

所以它看起来像这样：

<li><a class='ai' href='#'>Dropmenu</a>
  <ul class='menus'>
    <li><a href='#'>Dropmenu 1</a>
      <ul class='menus'>
        <li><a href='#'>Dropmenu 1</a></li>
        <li><a href='#'>Dropmenu 2</a></li>
        <li><a href='#'>Dropmenu 3</a></li>
        <li><a href='#'>Dropmenu 4</a></li>
        <li><a href='#'>Dropmenu 5</a></li>
      </ul>
    </li>
    <li><a href='#'>Dropmenu 2</a></li>
    <li><a href='#'>Dropmenu 3</a></li>
    <li><a href='#'>Dropmenu 4</a></li>
    <li><a href='#'>Dropmenu 5</a></li>
  </ul>
</li>

CSS

然后，添加这个 CSS：

#menu .menus li > ul.menus {
  transform: translateX(100%) scale(1.0);
  top: 0;
}

#menu ul.menus {
  overflow: visible !important;
}

最终结果

完成后应该如下所示： 

/* CSS Main Menu */

#menu .menus li > ul.menus {
   transform: translateX(100%) scale(1.0);
   top: 0;
}

#menu ul.menus {
  overflow: visible !important;
}

#menu-wrapper {
  background: #353535;
  height: 50px;
  width: 100%;
  position: relative;
  z-index: 99;
}

#menu {
  color: #fff;
  height: 50px;
  max-width: 1100px;
  margin: 0 auto;
  -webkit-transform: translateZ(0);
}

#menu ul,
#menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu ul {
  height: 50px
}

#menu li {
  float: left;
  display: inline;
  position: relative;
  font-family: 'Oswald';
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

#menu li a {
  color: #fff;
}

#menu a {
  display: block;
  line-height: 50px;
  padding: 0 20px;
  margin: 0;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s ease-in-out;
}

#menu li:hover > a {
  color: #f8a82a;
}

#menu li a:hover {
  color: #f8a82a;
}

#menu input {
  display: none;
  margin: 0;
  padding: 0;
  width: 80px;
  height: 50px;
  opacity: 0;
  cursor: pointer
}

#menu label {
  font-family: 'Oswald';
  font-size: 30px;
  font-weight: 400;
  width: 35px;
  height: 51px;
  line-height: 51px;
  text-align: center
}

#menu label span {
  font-size: 13px;
  position: absolute;
  left: 35px
}

#menu ul.menus {
  visibility: hidden;
  opacity: 0;
  height: auto;
  min-width: 166px;
  background: #fff;
  position: absolute;
  z-index: 99;
  color: #aaa;
  top: 50px;
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

#menu li:hover > ul.menus {
  visibility: visible;
  opacity: 1;
  -moz-transform: scale(1.0);
  -o-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}
#menu .menus li > ul.menus {
  transform: translateX(100%) scale(1.0);
  top: 0;
}



#menu a.ai,
#menu a.trigger2 {
  padding: 0 27px 0 14px;
  transition: all 0.3s linear;
}

#menu > li:hover > a.ai,
#menu a.ai:hover {
  background: transparent;
  color: #f8a82a;
}

#menu li > a.ai::after {
  content: "\f0d7";
  font-family: FontAwesome;
  margin: 0 auto;
  width: 10px;
  height: 10px;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 10px;
}

#menu ul.menus a {
  background: #fff;
  color: #999;
  border-bottom: 1px solid #f0f0f0;
  margin: 0;
  transition: all 0.2s linear;
}

#menu ul.menus a:hover {
  background: #f8a82a;
  color: #fff;
  transition: all .1s linear;
}

#menu ul.menus li {
  display: block;
  width: 100%;
  font-family: 'Lato';
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
}

#menu ul.menus li a:before {
  visibility: hidden;
  opacity: 0;
  content: "\f061";
  font-family: FontAwesome;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  top: 0;
  left: 35px;
  margin-right: 10px;
  position: absolute;
  padding: 0;
  color: #fff;
  transition: all 0.2s ease-in-out;
}

#menu ul.menus li a:hover:before {
  left: 10px;
  visibility: visible;
  opacity: 1;
}

#menu ul.menus li:hover {
  width: 100%;
}

#menu ul.menus li:last-child {
  border-bottom: none;
}

#menu ul.menus li:first-child a {
  border-top: none;
}

#menu ul.menus li:last-child a {
  border-bottom: none;
}

#menu ul.menus > li:hover > a {
  background: #f8a82a;
  color: #fff;
  padding-left: 25px;
  transition: all 0.1s linear;
}

#menu .ranpost {
  cursor: pointer;
  float: right;
}

#menu .ranpost:hover {
  background-color: transparent!important;
}

#menu ul.menusub a {
  background: #fff;
  color: #999;
  border-bottom: 1px solid #f0f0f0;
  margin: 0;
  transition: all 0.2s linear;
}

#menu ul.menusub a:hover {
  background: #f8a82a;
  color: #fff;
  transition: all .1s linear;
}

#menu ul.menusub li {
  display: block;
  width: 100%;
  font-family: 'Lato';
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
}

#menu ul.menusub li a:before {
  visibility: hidden;
  opacity: 0;
  content: "\f061";
  font-family: FontAwesome;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  top: 0;
  left: 35px;
  margin-right: 10px;
  position: absolute;
  padding: 0;
  color: #fff;
  transition: all 0.2s ease-in-out;
}

#menu ul.menusub li a:hover:before {
  left: 10px;
  visibility: visible;
  opacity: 1;
}

#menu ul.menusub li:hover {
  width: 100%;
}

#menu ul.menusub li:last-child {
  border-bottom: none;
}

#menu ul.menusub li:first-child a {
  border-top: none;
}

#menu ul.menusub li:last-child a {
  border-bottom: none;
}

#menu ul.menusub > li:hover > a {
  background: #f8a82a;
  color: #fff;
  padding-left: 25px;
  transition: all 0.1s linear;
}

#menu .ranpost {
  cursor: pointer;
  float: right;
}

#menu .ranpost:hover {
  background-color: transparent!important;
}
<div id='menu-wrapper'>
  <div class='content-wrapper'>
    <nav id='menu'>
      <input type='checkbox' />
      <label/>
      <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Static Page</a></li>
        <li><a class='ai' href='#'>Dropmenu</a>
          <ul class='menus'>
            <li><a href='#'>Dropmenu 1</a>
              <ul class='menus'>
                <li><a href='#'>Dropmenu 1</a></li>
                <li><a href='#'>Dropmenu 2</a></li>
                <li><a href='#'>Dropmenu 3</a></li>
                <li><a href='#'>Dropmenu 4</a></li>
                <li><a href='#'>Dropmenu 5</a></li>
              </ul>
            </li>
            <li><a href='#'>Dropmenu 2</a></li>
            <li><a href='#'>Dropmenu 3</a></li>
            <li><a href='#'>Dropmenu 4</a></li>
            <li><a href='#'>Dropmenu 5</a></li>
          </ul>
        </li>
        <li><a class='ai' href='#'>Dropmenu</a>

        </li>
        <li><a class='ai' href='#'>Dropmenu</a>
          <ul class='menus'>
            <li><a href='#'>Dropmenu 1</a></li>
            <li><a href='#'>Dropmenu 2</a></li>
            <li><a href='#'>Dropmenu 3</a></li>
            <li><a href='#'>Dropmenu 4</a></li>
            <li><a href='#'>Dropmenu 5</a></li>
          </ul>
        </li>
        <li><a href='#'>Button</a></li>
        <li><a href='#'>Error</a></li>
        <li class='ranpost'>
          <a onclick='feelingLucky();'><i/>Surprise Me</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<div class='clear' />
注意：而不是： 
#menu ul.menus {
  overflow: visible !important;
}

您可以删除 #menu ul.menus 上的 overflow: hidden。

移动

有关移动支持，请参阅this answer。

【讨论】：

  • 对于移动设备，请添加一个新问题 :) 我想我明白了，但它不属于这里。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-09-03
  • 1970-01-01
  • 1970-01-01
  • 2012-11-18
  • 1970-01-01
  • 2020-09-06
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode