html - CSS Dropdown menu display block -
i've been trying create dropdown menu. want when hover on anchor tag displays it. know can't use display:block when not part of block, don't know how. please, me! thanks! display: block not work. here html , css:
<!doctype html> <!--[if ie 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt ie 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>motrium - home</title> <script src="js/vendor/custom.modernizr.js"></script> <link rel="stylesheet" href="css/james222.css" type="text/css"> </head> <body style="background-color: #c1c1c1;"> <div class="wrapper"> <div class="form-brand"> <a class="brand" href="#">motrium</a> </div> <ul class="brand-nav"> <li><a href="#">home</a><br /></li> <li><a href="#">about</a><br /></li> <li><a href="#">contact</a></li> <li class="dropdown-holder"><a href="#">downloads</a> <ul class="dropdown-menu"> <li><a href="#">test</a></li> </ul> </li> </ul><br /> <div class="form-login"> <input type="text" name="user_name" placeholder="username" class="input-text-normal" style="width: 114px;"> <input type="password" name="user_pass" placeholder="password" class="input-text-normal" style="width: 114px;"> <input type="submit" value="login" class="input-button" style="width: 125px;"> <p class="form-text">dont have account yet? <a href="#">register.</a></p> </div><br /> <div class="form-views"> <!-- hitwebcounter code start --> <img src="http://hitwebcounter.com/counter/counter.php?page=4929727&style=0025& nbdigits=6&type=page&initcount=0" title="50 styles" alt="website views" border="0" > </div> </div> <script> document.write('<script src=' + ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js><\/script>') </script> <script src="js/foundation.min.js"></script> <!-- <script src="js/foundation/foundation.js"></script> <script src="js/foundation/foundation.alerts.js"></script> <script src="js/foundation/foundation.clearing.js"></script> <script src="js/foundation/foundation.cookie.js"></script> <script src="js/foundation/foundation.dropdown.js"></script> <script src="js/foundation/foundation.forms.js"></script> <script src="js/foundation/foundation.joyride.js"></script> <script src="js/foundation/foundation.magellan.js"></script> <script src="js/foundation/foundation.orbit.js"></script> <script src="js/foundation/foundation.placeholder.js"></script> <script src="js/foundation/foundation.reveal.js"></script> <script src="js/foundation/foundation.section.js"></script> <script src="js/foundation/foundation.tooltips.js"></script> <script src="js/foundation/foundation.topbar.js"></script> <script> $(document).foundation(); </script> </body> </html> * { } .wrapper { padding-top: 10px; padding-bottom: 20px; margin: 10px; } .brand { font-weight: bold; font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size: 30px; color: white; text-shadow: 3px 3px 4px gray; text-decoration: none; } .brand-nav { font-weight: bold; font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size: 30px; color: white; text-shadow: 3px 3px 4px gray; text-decoration: none; width: 200px; height: 200px; border-style: solid; border-width: thin; border-color: black; border-radius: 10px; background-color: gray; padding: 5px; padding-left: 20px; padding-right: 20px; text-align: center; } .brand-nav a:link{ text-decoration: none; color: white; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; } .brand-nav a:visited{ color: white; } .brand-nav a:hover{ text-decoration: none; color: black; height: 55px; background-color: #c1c1c1; border-style: solid; border-width: thin; border-color: black; border-radius: 10px; } .brand-nav li{ list-style: none; } .input-text-normal { height: 25px; font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size: 20px; font-weight: bold; color: white; background-color: #c1c1c1; border-style: solid; border-width: thin; border-color: black; border-radius: 8px; padding-left: 5px; padding-right: 5px; margin-top: 5px; margin-bottom: 5px; } .input-button { font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size: 20px; font-weight: bold; color: white; background-color: #c1c1c1; border-style: solid; border-width: thin; border-color: black; border-radius: 8px; padding-left: 5px; padding-right: 5px; margin-top: 10px; margin-bottom: 5px; } .form-views{ font-weight: bold; font-family: "lucida sans unicode", "lucida grande", sans-serif; color: white; text-shadow: 3px 3px 4px gray; text-decoration: none; border-style: solid; border-width: thin; border-color: black; border-radius: 10px; background-color: gray; height: 30px; width: 200px; text-align: center; padding: 5px; padding-left: 20px; padding-right: 20px; } .form-login { font-weight: bold; font-family: "lucida sans unicode", "lucida grande", sans-serif; color: white; text-shadow: 3px 3px 4px gray; text-decoration: none; border-style: solid; border-width: thin; border-color: black; border-radius: 10px; background-color: gray; text-align: center; width: 200px; padding: 5px; padding-left: 20px; padding-right: 20px; } .form-text{ color: white; font-size: 14px; } .form-text a:link{ text-decoration: none; color: white; } .form-text a:visited{ color: blue; } .form-text a:hover{ color: black; } .form-brand{ width: 200px; height: 45px; border-style: solid; border-width: thin; border-color: black; border-radius: 10px; background-color: gray; padding: 5px; padding-left: 20px; padding-right: 20px; text-align: center; } .dropdown-menu a:link{ color: white; font-weight: bold; font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size: 18px; color: white; text-shadow: 3px 3px 4px gray; text-decoration: none; } .dropdown-menu a:hover{ display: block; } .dropdown-menu{ width: 110px; border-style: solid; border-width: thin; border-color: black; border-radius: 10px; background-color: gray; text-align: center; padding: 5px; padding-left: 20px; padding-right: 20px; display: none; } .dropdown-menu:hover{ display: block; }
i think need add someting css, little hard fiddle code there foundation things know nothing about:
.dropdown-holder:hover .dropdown-menu{ display:block; }
Comments
Post a Comment