CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 2 of 2
  1. #1
    Join Date
    Oct 2012
    Posts
    9

    Question CSS Problem [Jquery powered navigation]

    well what im having is really confusing.

    on Google Chrome and other browsers my navigation looks like this.



    but in Firefox



    it pushes the body of my site. seems like its because of display block/ or float left but here is my code

    Code:
    #nav a{
    display:inline;
    }
    #nav li{
    float:left;
    position:relative;
    margin-right: 5px;
    }
    #nav ul {
    position:absolute;
    display:none;
    top: 45px;
    background: #F5F5F5;
    font-family: Verdana;
    -moz-box-shadow: 0px 1px 2px #888;
    -webkit-box-shadow: 0px 1px 2px #888;
    box-shadow: 0px 1px 2px #888;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    white-space:nowrap;
    }
    .CurrentHover {
    background-color: #F5F5F5;
        padding-top: 13px;
        padding-bottom: 14px;
        -webkit-border-radius: 5px 5px 0px 0px;
        border-radius: 5px 5px 0px 0px;
        color: #017229;
        width: auto;
    }
    
    #nav li ul a
    {
    height:auto;
    float:left;
    margin-left: 15px;
    margin-right: 15px;
    white-space: nowrap;
    }
    #nav li ul a:hover
    {
    border-bottom: 3px solid #008000;
    }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }
    and my Jquery

    Code:
    function mainmenu(){
    $(" #nav ul ").css({display: "none"}); // Opera Fix
    $(" #nav li ").hover(function () {
        $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(250);
    },function(){
        $(this).find('ul:first').css({ visibility: "hidden" });
    });
    $(" #withNav").hover(function () {
        $("a#stylePatient").toggleClass("CurrentHover");
    }, function () {
        $("a#stylePatient").toggleClass("CurrentHover");
    });
    }
     $(document).ready(function(){					
    	mainmenu();
    });

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: CSS Problem [Jquery powered navigation]

    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  





Click Here to Expand Forum to Full Width

Featured