【问题标题】:My submenu of menu bar not getting visible我的菜单栏子菜单不可见
【发布时间】:2019-07-31 13:10:05
【问题描述】:

我正在使用我网站上的菜单。

在我的网站中,这是我的结构- 文章 -- 菜单 技术文章——子菜单 博主教程——子子菜单——(问题不可见) 照片教程——子子菜单

但我的问题是“Blogger 教程”菜单不可见。我试图解决这个问题,但没有得到任何解决方案。你可以在我的网站上看到问题:http://www.joblesspanda.com/

节目问题图片:https://imgur.com/a/KaVU5QU

<ul class='menu'> <!-- Customize Navigation Menu Here -->
  <li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://www.joblesspanda.com/2019/04/all-tools.html' itemprop='url'><span itemprop='name'>Tools</span></a></li>
  <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Articles' itemprop='url'><span itemprop='name'>Articles</span></a>
    <ul class='sub-menu'>
      <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Tech%20Articles' itemprop='url'><span itemprop='name'>Tech Articles</span></a>
        <ul class='sub-menu'>
          <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Blogger Tutorials</a>
            <ul class='sub-menu'>
              <li><a href='http://www.joblesspanda.com/2019/06/Blogger-Complete-Tutorial---Step-By-Step-Guide.html'>Blogger Complete Tutorial - Step By Step Guide</a></li>
              <li><a href='http://www.joblesspanda.com/2019/07/How-To-Share-Blog-Post-On-Facebook-Twitter-Tumblr-Google-Plus-etc-Automatically.html'>How To Share Blog Post On Facebook, Twitter, Tumblr, Google+ etc Automatically</a></li>
              <li><a href='http://www.joblesspanda.com/search/label/Tech%20Articles'>More Articles</a></li>
              <!--<li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>-->
            </ul>
          </li>
        </ul>

        <ul class='sub-menu'>
          <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Photo Tutorials</a>
          </li>
        </ul>
      </li>
      <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>
      <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Gaming Articles</span></a></li>
      <li><a href='http://www.joblesspanda.com/search/label/More%20Articles' itemprop='url'><span itemprop='name'>More Articles</span></a></li>
    </ul>
  </li>
  <!--<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>-->
  <li><a href='http://www.joblesspanda.com/search/label/Quiz' itemprop='url'><span itemprop='name'>Quiz</span></a></li>
  <li><a href='http://www.joblesspanda.com/search/label/Websites%2FApps%20Reviews' itemprop='url'><span itemprop='name'>Websites/Apps Reviews</span></a></li>
  <li><a href='http://www.joblesspanda.com/2019/05/Amazon-Quiz-Answers-Today.html' itemprop='url'><span itemprop='name'>Amazon Quiz Answers</span></a></li>
</ul>

【问题讨论】:

    标签: html css submenu


    【解决方案1】:

    您在 li 中有多个 ul。删除第二个 ul 元素。它会显示。检查下面的屏幕截图。

    之前:

    之后:(删除ul之后)

    之后:(如果你想要照片教程文本,你需要在li添加这个)

    <ul class='menu'> <!-- Customize Navigation Menu Here -->
      <li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a href='http://www.joblesspanda.com/2019/04/all-tools.html' itemprop='url'><span itemprop='name'>Tools</span></a></li>
      <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Articles' itemprop='url'><span itemprop='name'>Articles</span></a>
        <ul class='sub-menu'>
          <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Tech%20Articles' itemprop='url'><span itemprop='name'>Tech Articles</span></a>
            <ul class='sub-menu'>
              <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Blogger Tutorials</a>
                <ul class='sub-menu'>
                  <li><a href='http://www.joblesspanda.com/2019/06/Blogger-Complete-Tutorial---Step-By-Step-Guide.html'>Blogger Complete Tutorial - Step By Step Guide</a></li>
                  <li><a href='http://www.joblesspanda.com/2019/07/How-To-Share-Blog-Post-On-Facebook-Twitter-Tumblr-Google-Plus-etc-Automatically.html'>How To Share Blog Post On Facebook, Twitter, Tumblr, Google+ etc Automatically</a></li>
                  <li><a href='http://www.joblesspanda.com/search/label/Tech%20Articles'>More Articles</a></li>
                  <!--<li><a href='#'>Sub Sub-Menu 3</a></li>
        <li><a href='#'>Sub Sub-Menu 4</a></li>-->
                </ul>
              </li>
              <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Photo Tutorials</a>
              </li>
            </ul>
    
          </li>
          <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>
          <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Gaming Articles</span></a></li>
          <li><a href='http://www.joblesspanda.com/search/label/More%20Articles' itemprop='url'><span itemprop='name'>More Articles</span></a></li>
        </ul>
      </li>
      <!--<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>-->
      <li><a href='http://www.joblesspanda.com/search/label/Quiz' itemprop='url'><span itemprop='name'>Quiz</span></a></li>
      <li><a href='http://www.joblesspanda.com/search/label/Websites%2FApps%20Reviews' itemprop='url'><span itemprop='name'>Websites/Apps Reviews</span></a></li>
      <li><a href='http://www.joblesspanda.com/2019/05/Amazon-Quiz-Answers-Today.html' itemprop='url'><span itemprop='name'>Amazon Quiz Answers</span></a></li>
    </ul>

    【讨论】:

      【解决方案2】:

      问题在于额外的ul 只需将您的照片博客的li 和博主教程的li 放在单个ul 中即可:

      <ul class='menu'> <!-- Customize Navigation Menu Here -->
        <li class='home'><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='http://www.joblesspanda.com/2019/04/all-tools.html' itemprop='url'><span itemprop='name'>Tools</span></a></li>
        <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Articles' itemprop='url'><span itemprop='name'>Articles</span></a>
          <ul class='sub-menu'>
            <li><a class='with-ul' href='http://www.joblesspanda.com/search/label/Tech%20Articles' itemprop='url'><span itemprop='name'>Tech Articles</span></a>
              <ul class='sub-menu'>
                <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Blogger Tutorials</a>
                  <ul class='sub-menu'>
                    <li><a href='http://www.joblesspanda.com/2019/06/Blogger-Complete-Tutorial---Step-By-Step-Guide.html'>Blogger Complete Tutorial - Step By Step Guide</a></li>
                    <li><a href='http://www.joblesspanda.com/2019/07/How-To-Share-Blog-Post-On-Facebook-Twitter-Tumblr-Google-Plus-etc-Automatically.html'>How To Share Blog Post On Facebook, Twitter, Tumblr, Google+ etc Automatically</a></li>
                    <li><a href='http://www.joblesspanda.com/search/label/Tech%20Articles'>More Articles</a></li>
                    <!--<li><a href='#'>Sub Sub-Menu 3</a></li>
          <li><a href='#'>Sub Sub-Menu 4</a></li>-->
                  </ul>
                </li>
                <li><a href='http://www.joblesspanda.com/search/label/Blogger%20Tutorials'>Photo Tutorials</a>
                </li>
              </ul>
            </li>
            <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>
            <li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Gaming Articles</span></a></li>
            <li><a href='http://www.joblesspanda.com/search/label/More%20Articles' itemprop='url'><span itemprop='name'>More Articles</span></a></li>
          </ul>
        </li>
        <!--<li><a href='https://joblesspandablog.blogspot.com/2019/04/no-article-available-yet.html' itemprop='url'><span itemprop='name'>Android Articles</span></a></li>-->
        <li><a href='http://www.joblesspanda.com/search/label/Quiz' itemprop='url'><span itemprop='name'>Quiz</span></a></li>
        <li><a href='http://www.joblesspanda.com/search/label/Websites%2FApps%20Reviews' itemprop='url'><span itemprop='name'>Websites/Apps Reviews</span></a></li>
        <li><a href='http://www.joblesspanda.com/2019/05/Amazon-Quiz-Answers-Today.html' itemprop='url'><span itemprop='name'>Amazon Quiz Answers</span></a></li>
      </ul>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-07-08
        • 1970-01-01
        • 2015-10-18
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多