Question

我的网站：https://www.bestblogging.co.uk/ 导航下拉菜单不可单击，主页按钮也不可！我对代码开发不是很熟悉，所以找不到解决方案。多谢您的协助。这是CSS和HTML代码。谢谢。

body .navbar{height:auto;}
      .dropdown-button {
    position: relative; /* make the item be referred to as parent of the positioned child */
}
 .dropdown-content {
    position: absolute; /* remove the list from the natural flow */
    top: 100%; /* place its top at the item bottom without a gap at any item height */
    left: -9999px; /* hide the list well outside the viewport */
}
.dropdown-button:hover .dropdown-content {
    left: 0; /* align the sublist with its parent item on hover */
}
.widget {
line-height: 1;
margin:0px;
}
.widget ul {
padding: 0;
margin: 0;
line-height: 1;
}
.widget li, .BlogArchive #ArchiveList ul.flat li {
padding: 0;
margin: 0;
text-indent: 0;
}
ul {
  padding: 0; }
  ul li {
    list-style-type: none; }
.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px; }
  .row:after {
    content: "";
    display: table;
    clear: both; }
  .row .col {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 .row .col.l1 {
        width: 8.33333%;
        margin-left: 0; }
      .row .col.l2 {
        width: 16.66667%;
        margin-left: 0; }
      .row .col.l3 {
        width: 25%;
        margin-left: 0; }
      .row .col.l4 {
        width: 33.33333%;
        margin-left: 0; }
      .row .col.l5 {
        width: 41.66667%;
        margin-left: 0; }
      .row .col.l6 {
        width: 50%;
        margin-left: 0; }
      .row .col.l7 {
        width: 58.33333%;
        margin-left: 0; }
      .row .col.l8 {
        width: 66.66667%;
        margin-left: 0; }
      .row .col.l9 {
        width: 75%;
        margin-left: 0; }
      .row .col.l10 {
        width: 83.33333%;
        margin-left: 0; }
      .row .col.l11 {
        width: 91.66667%;
        margin-left: 0; }
      .row .col.l12 {
        width: 100%;
        margin-left: 0; }
  
/*----------------------- CUSTOM CSS BIDY AND CONTENT ------------------------------*/
body,.body-fauxcolumn-outer {
color:$(body.text.color);
background:$(body.background.color);
font-family: 'open sans', sans-serif;
}
body p {
padding-bottom:20px;
line-height:2em;
}
#container {
margin-left:auto;
margin-right:auto;
margin:0 auto;
color:#444;
font-size:14px;
font-weight:normal;
}
#content {
width:712px;
padding:20px 0px 10px 0px;
float:left;
display:inline;
margin-top:-10px;
}
#content-wide {
clear:both;
width:1060px;
padding:10px 0px;
}
#aside {
display:inline;
float:right;
width:336px;
color:#ccc;
padding:10px 0px;
}
#footer {
clear:both;
:hidden;
background:$(credit.bg.color);
font-size:12px;
}
.radius {
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.container-box{
background:$(content.background.color);
}

#main-header-wrapper {
padding-bottom:10px;
background:$(header.background.color);
}
#header-wrapper {
min-height:100px;
margin-bottom:0px;
}
.head-col {
padding:20px 0;
}
.header-advertisement {
padding:30px 0;
}
.header-ad {
float:right
}
#header {
margin-top:-15px;
}
#header h1 {
color:#666666;
text-shadow:2px 2px 2px #FFFFFF;
letter-spacing:-2px;
}
#header a {
text-decoration:none;
color:#666666;
}
#header a:hover {
text-decoration:none;
color:#666666;
}
#header .description {
margin:-3px 5px 5px;
line-height:1.4em;
color:#888888;
font-size:14px;
}
.header {
margin:35px 0;
}
.h-title {
font-size:36px;
line-height:40px;
margin:10px 0;
font-family:inherit;
font-weight:bold;
line-height:1;
color:$(blog.title.color);
font-family: 'Raleway',sans-serif;
}
.h-title a {
color:$(blog.title.color);
}
.Header .description {
margin:.5em 0 10px;
padding:0 2px;
color:$(blog.description.color);
}
.date-header {
display:none;
}
.home-main-content {
padding: 0px !important;
}

<!-- Start Main navbar -->
    <div class='container'>
        <nav class='teal lighten-1'>
         <div class='nav-wrapper'>
            <a class='waves-effect waves-light brand-logo logo-main'><i class='medium mdi-action-home'/></a>
             <ul class='right side-nav' id='slide-out'>
          
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/i-am-ambitious-and-avid-blogger-with.html'>About Us</a></li>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/contact-us.html'>Contact Us</a></li>
              <li class='no-padding'>
                <ul class='collapsible collapsible-accordion'>
                  <li>
                    <a class='waves-effect waves-light collapsible-header'>Dropdown<i class='mdi-navigation-arrow-drop-down'/></a>
                    <div class='collapsible-body'>
                      <ul>
                        <li><a href='https://bestbloggingforyou.blogspot.com/p/terms-of-service.html'>Privacy Policy</a></li>
                        <li><a href='https://bestbloggingforyou.blogspot.com/p/blog-page.html'>Earn 5 Bucks Per Day</a></li>
                        <li><a href='https://www.bestblogging.co.uk/p/blog-page_13.html'>Guest Blog</a></li>
                        <li><a href='#!'>Coming Soon..</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
            <ul class='right hide-on-med-and-down'>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/i-am-ambitious-and-avid-blogger-with.html'>About Us</a></li>
              <li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/contact-us.html'>Contact Us</a></li>
              <li><a class='waves-effect waves-light dropdown-button' data-activates='dropdown1'>Dropdown<i class='mdi-navigation-arrow-drop-down right'/></a></li>
              <ul class='dropdown-content' id='dropdown1'>
                <li><a href='https://bestbloggingforyou.blogspot.com/p/terms-of-service.html'>Privacy Policy</a></li>
                <li><a href='https://bestbloggingforyou.blogspot.com/p/blog-page.html'>Earn 5 Bucks Per Day</a></li>
                <li><a href='https://www.bestblogging.co.uk/p/blog-page_13.html'>Guest Blog</a></li>
                <li><a href='#!'>Coming Soon..</a></li>
              </ul>
            </ul>
            <a class='button-collapse' data-activates='slide-out'><i class='mdi-navigation-menu'/></a>
        </div>
      </nav>
    </div>

    <!-- End Main navbar -->

当我单击下拉菜单时，它什么也没做。几天来我一直在寻找解决方案，并且从网上尝试了许多解决方案，但是没有任何效果。我会感谢您的帮助。

Answer 1

首先，尝试修复控制台错误，我认为您有一些JS错误。看图片：

您是否编写了一些JS代码，也可能您在实现上存在问题，请看上图。

导航下拉菜单不可点击

1 个答案: