html - Nav menu "pulled left" using Bootstrap: submenu also pulled left -
i trying make navigation bar drop down menus. i've created navigation bar , used bootstraps "pull-left" class move left. dropdown menu have created using jquery moved left since html code contained in div marked "pull-left" have googled , tried out stuff few hours, couldn't quite find solution.
the html navigation bar
<div id = "nav"> <div class = "container" > <div class = "pull-left "> <img class = "logo-image" src = "logo2.png" /> </div> <ul class = "pull-left"> <li class "logo"><a href = "#">home</a></li> <li><a href = "#">about</a></li> <li> <a href = "#">projects</a> <ul> <li><a href = "#">stealth game </a></li> </ul> </li> <li><a href = "#">gallery</a></li> <li><a href = "#">tutorials</a></li> </ul> <ul class = "pull-right"> <li> <a href = "#">follow me</a></li> </ul> </div> the css
#nav li{ display:inline; padding-right : 5px; } #nav ul ul { display:none; position:fixed; z-index:999; } #nav li li { float: auto; } #nav li { width:150px; display: inline-block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:80%; border:1px solid #ccc; } #nav ul{ list-style-type:none; margin:0; padding:0; } #nav li li { background:#ebe7e6!important; text-align:left; height:auto; line-height:1; width:150px; padding:8px 20px 8px 22px; border:1px solid #d0d0d0; border-top:none; margin-right:0; } and javascript
$(document).ready(function() { $("#nav li:has(ul)").hover(function(){ $(this).find("ul").slidedown(); }, function(){ $(this).find("ul").hide(); }); }); so actual problem is, submenu, appearing doesn't appear under menu opened from, pulled left since used bootstrap class move navigation bar left.
two things resolve this:
#nav li { display:inline-block; ... } #nav ul ul { position:absolute; ... }
Comments
Post a Comment