HTML <div> 似乎没有得到认可

Question

I have 2 divisions. One for the header( head-top ) and other for the rest of the space( centre ) in the page as follows. I have attached click events to the elements in header. But these elements don't seem to function. I cannot click the toggle menu. Nothing Happens. I have 2 buttons and a toggle menu in the menu bar.

HTML:

<div class="head-top">
            <div class="menu-links">
                <ul class="toggle-menu">
                    <li class="toggle">
                        <span class="toggle-menu-bar"></span>
                        <span class="toggle-menu-bar"></span>
                        <span class="toggle-menu-bar"></span>
                    </li>
                    <li class="content0" style="display: none">
                        <ul>
                            <li><a href="#" id="home">Home</a></li>
                            <li><a href="#" id="explore">Explore</a></li>
                            <li><a href="#" id="searcha">Search</a></li>
                            <li><a href="#" id="recent">Recent</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="b1">Sign Up</div>
            <div id="b2">Upload</div>
        </div>

            <div class="center">
                <div class="middle">
                    <h1>The Starry Night</h1>
                    <span><br>Vincent van Gogh</span>
                </div>
            </div>

CSS:

.head-top {
  width: 90%;
  height: 15%;
  position: relative;
 }
.center {
  background: rgba(0, 0, 0);
  text-align: center;
  position: absolute;
  color: #000000;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  cursor: pointer;
}
.middle {
  position: absolute;
  margin-top: -6em;
  right: 0;
  left: 0;
  top: 50%;
}

Click Events:

 $('li.content0').hide();
  $('ul.toggle-menu').delegate('li.toggle', 'click', function () {
        $(this).next().toggle('fast').siblings('.content0').hide('fast');
    });

EDIT: CSS for buttons

/* Login, Sign Up Buttons Start Here */

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#b1, 
#b2 {
  position: relative;
  padding: 14px 0;
  border: 2px #000000 solid;
  color: #000000;
  cursor: pointer;
  font-family: "Montserrat", "helvetica neue", helvetica, arial, sans-serif;
  font-size: .9em;
  text-transform: uppercase;
  transition: color 0.4s, background-color 0.4s;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1em;
  outline: none;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 210px;
  top: 50%;
  left: 50%;
  margin: 0 -105px;
  width: 210px;
  pointer-events: none;
}
#b1:hover,#b1:focus
#b2:hover,#b2:focus {
  transition: color 0.4s, background-color 0.4s; 
  color: white;
  text-decoration: none;
  background-color: #000000;
}
#b1 {
  position: absolute;
  top: 7%;
  left: 81%;
  cursor: pointer;
}
#b2 {
  position: absolute;
  top: 7%;
  left: 100%;
  cursor: pointer;
}
/* Buttons End Here */

Answer 1

Your .center element covered the whole head-top element. Lets find the other way of making the CSS with what you try to archive, for fix, remove and left the follow:

.center {
  background: rgba(0, 0, 0);
  text-align: center;
  color: #000000;
  cursor: pointer;
}