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
Post a Comment