jquery - Javascript not working? When I click the text, the menu doesn't dropdown -


i'm making home page website idea have, , i'm trying make dropdown menu when hit log in in top right. sort of button next search bar on site. know how drop down menu, i've checked html, css, , javascript, , can't find wrong. copied code segments dropdown menu works , copied code see if work, still doesn't. have ideas? appreciated.

here's code.

var main = function() {    $('.login').click(function() {      $('.dropdown-menu').toggle();    });  }  $(document).ready(main);
.nav {    color: #5a5a5a;    font-size: 11px;    font-weight: bold;    padding: 50px;    text-transform: uppercase;  }  .nav li {    display: inline;  }  #left {    float: left;  }  #right {    float: right;  }  .jumbotron {    height: 500px;    background-repeat: no-repeat;    background-size: cover;  }  .jumbotron .container {    position: relative;    top: 100px;  }  .login {    font-size: 11px;  }  .dropdown-menu {    font-size: 16px;    margin-top: 5px;    min-width: 105px;  }
<!doctype html>  <html>    <head>    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">    <link rel="stylesheet" type="text/css" href="cssfile.css" />    <title>fandoms , stuff</title>  </head>    <body>    <!--add ending body tag-->    <div class="nav">      <ul id="left">        <li><a href="homepage.html">home</a>        </li>        <li><a href="#">about</a>        </li>        <li><a href="fandoms.html">fandoms</a>        </li>      </ul>      <ul id="right">        <li class="dropdown">          <a href="#" class="login">log in</a>          <ul class="dropdown-menu">            <li><a href="#">test</a>            </li>          </ul>        </li>        <li><a href="#">register</a>        </li>      </ul>    </div>    <div class="jumbotron">      <div class="container">        <h1>welcome</h1>        <p>(this put long description.)</p>      </div>    </div>    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  </body>    </html>

the padding in class blocking access link "login". if make padding: 0 can click link , response. did not further toggle current problem have not being able click link.

.nav {     color: #5a5a5a;     font-size: 11px;     font-weight: bold;     padding: 50px;     text-transform: uppercase; } 

Comments

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

Magento/PHP - Get phones on all members in a customer group -

session - Logging Out Using PHP -