CODEWITHSUNDEEP
jqueryhyperlinknavigationbar
vaanipala
vaanipala

Reputation: 1291

jquery navigation bar: list items link with submenus not displaying

when i changed the li items to links (using a hef) in the navigation bar only home, about and contact is displaying (these are links without submenus). REgister Company and Buy Company are not displaying (these are links with submenus). My code at jsfiddle.net/vaanipala/rVNQk/7. What could be the problem?

FYI, if the li items were not links the navigation bar is displaying fine.

thank you.

html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gama Corporate Services</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#submenu1,#submenu2").children().hide();
    $("#subsubmenu1").children("ul").hide();

    $("#submenu1,#submenu2").hover( 
        function(){//onmouseover 
            $(this).children("ul").slideDown(); 
        }, 
        function(){//onmouseout 
            $(this).children("ul").slideUp(); 
    });

    $("#subsubmenu1").hover(
        function(){//onmouseover

            $(this).children("ul").animate({marginLeft:"130px"}).css({
                                "position":"absolute",
                                "z-index":"-1",
                                "width":"120px",
                                "display":"block"});
            $(this).children("ul").show();
        },
        function(){//onmouseout
            $(this).children("ul").animate({marginLeft:"0"}).css({"position":"absolute","z-index":"-1"});
            $(this).children("ul").hide();
        }); 
});
</script>
</head>

<body>
<div class="contentwrapper">
<div id="header">
<div id="logo">
    <img src="images/logo.png" />
</div>
<!--<div id="company_name">
    Gama Corporate Services Sdn Bhd
</div>-->
<div id="navbar">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li id="submenu1"><a href="a.html">Register Company</a>
            <ul>
                <li id="subsubmenu1"><a href="b.html">New Sendirian Berhad Registration</a>
                    <ul>
                        <li><a href="#">Company Price</a></li>
                        <li><a href="#">Register New Company</a></li>
                        <li><a href="#">Steps to Incorporate</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="submenu2"><a href="c.html">Buy Company</a>
            <ul>
                <li><a href="#">Sendirian Berhad Ready Made Companies in Malaysia</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
</div>

<div id="leftcolumn">hello</div>
<div id="contentcolumn">Welcome to Gama Corporate Services.
This website is under construction</div>
<div id="rightcolumn">how ru</div>
<div id="footer">copyright gama corporate services</div>
</div><!--end contentwrapper-->

</body>
</html>

style.css

 /* CSS Document */
html body{
    padding:0;
    margin:0 auto;
}

.contentwrapper{
    width:900px;
    margin-left:auto;
    margin-right:auto;
    height: auto !important;
}
#header{
/*  height:20%;
*/  width:900px;
    height:280px;
    /*background-color:#009999;*/
    background-image:url('../images/bg_image.jpg');
    background-repeat:no-repeat;
    float:left;
    text-align:center;
}
#logo{
/*margin-top:15%;*/
float:left;
width:40%;
}
/*#company_name{
float:left;
font:"Times New Roman", Times, serif;
font-size:36px;
margin-top:20%;
}*/
#navbar{
/*  height:10%;
*/  width:900px;
    color:#ffffff;
    float:left;
    margin-top:2%;
    padding:0;
    z-index:0;
    position:relative;

}
#menu{
    list-style-type:none;
    margin:0;
    padding:0;
    position:absolute;
}

#menu li{
float:left;
    display:block;
    width:120px;
    text-align:center;
    background-color:#FF0000;
    padding:0;
    margin:0;
}
#menu li a{
display:block;
width:120px;
text-decoration:none;
line-height:25px;
padding:0;
}
#submenu1 ul, #submenu2 ul{
    float:left;
    display:block;
    width:120px;
    padding:0;
    margin:0;
}
/*#menu li ul ul li*/
#subsubmenu1 ul li
{position:relative;
left:0;
top:-30px;
background:#3399CC;
}


#leftcolumn{
    float:left;
    width:20%;
    background-color:#FF9900;
}
#contentcolumn{
    float:left;
    width:60%;
    background-color:#ffffff;
}
#rightcolumn{
    float:left;
    width:20%;
    background-color:#FF9900;
}
#footer{
/*  height:10%;
*/  width:inherit;
    padding-top:4px;
    background-color:#009999;
    text-align:center;
}

Upvotes: 0

Views: 319

Answers (1)

jaychapani
jaychapani

Reputation: 1509

You should use 

$("#submenu1,#submenu2").children("ul").hide();

instead of

$("#submenu1,#submenu2").children().hide();
$("#subsubmenu1").children("ul").hide();

to hide the sub menus. This will display you menus with sub menus.

Your link <a href="a.html">Register Company</a> is the child of sub menu "submenu1" so your code $("#submenu1,#submenu2").children().hide(); simply hide it. That's why you are not able to see those links.

Upvotes: 2

Related Questions