boillaOccably
New Member
i have a problem with my code, the width seems to work but the float no.Here it is:HERE IS AN EXAMPLE: http://jsfiddle.net/v82ck/THE PROBLEM: the float property on the menu when hovering doesnt change, i want the line below each menu element to slide below the element when hovering that menu element.the code isnt complicated, i just dont know what is happening JAVASCRIPT:\[code\] $(document).ready(function () { $('#line-menu').css({ //initial state 'float': 'left', 'width' : $('#menu-1').width(), }); $('#menu-1').hover(function(){ //first menu element var width = $(this).width(); $('#line-menu').animate({ 'float': 'left', 'width' : width }, "slow"); }); $('#menu-2').hover(function(){ //second menu element var width = $(this).width(); $('#line-menu').animate({ 'float': 'none', 'width' : width }, "slow"); }); $('#menu-3').hover(function(){ //third menu element var width = $(this).width(); $('#line-menu').animate({ 'float': 'right', 'width' : width }, "slow"); });});\[/code\]the css so you can see itCSS:\[code\]#line-menu{ height: 3px; width: 100px; position:absolute; z-index:50; background: #CC0000; margin-left:55px; padding-left:3px; padding-right:3px;}#line-menu-container{ text-align: center; min-width: 617px; max-width: 1113px; margin-left: auto; margin-right: auto;}\[/code\]this is the part that is conflicting HTML:\[code\]<header> <div id='menu'> <div class='menu-element' id='menu-1'>HORARIOS</div> <div class='menu-element' id='menu-2'>UBICACIÓN</div> <div class='menu-element' id='menu-3'>CONTACTO</div> </div></header> <div id='line-menu-container'> //the line contained in a container just to fix the centered position <div id='line-menu' ></div> </div> \[/code\]the jquery library that i use is https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.jsi ask you guys because i dont really know how to fix it...