Home/ Questions/Q 8507505
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T02:53:29+00:00

when i changed the li items to links (using a hef) in the navigation

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0