Question

My menu html is like this:

    <div id=navigation>
        <ul id=nav>
            <li>
                <asp:HyperLink ID=HyperLink1 runat=server
                    NavigateUrl=~/Home.aspx>Home</asp:HyperLink></li>
            <li>
                <asp:HyperLink ID=HyperLink2
                    runat=server NavigateUrl=~/UserSide/AboutUs.aspx>About  Us</asp:HyperLink></li>
            <li>
                <asp:HyperLink ID=HyperLink11 runat=server Products</asp:HyperLink>
                <ul>
                    <li>
                        <asp:HyperLink ID=HyperLink3 runat=server NavigateUrl=~/UserSide/Products/HomeTheatres.aspx>Home Theaters</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID=HyperLink4 runat=server NavigateUrl=~/UserSide/Products/BurglarAlarmSystem.aspx>Burglar Alaram System</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID=HyperLink5 runat=server NavigateUrl=~/UserSide/Products/AccessControlSystem.aspx>Access Control System</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID=HyperLink6 runat=server NavigateUrl=~/UserSide/Products/AutomationSystem.aspx>Automation System</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID=HyperLink7 runat=server NavigateUrl=~/UserSide/Products/CCTV.aspx>CCTV</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID=HyperLink8 runat=server NavigateUrl=~/UserSide/Products/CentralMusicSystem.aspx>Central Music System</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID=HyperLink9 runat=server NavigateUrl=~/UserSide/Products/PublicAddressSystem.aspx>Public Address System</asp:HyperLink></li>
                    <li>
                        <asp:HyperLink ID=HyperLink10 runat=server NavigateUrl=~/UserSide/Products/WiFiNetworks.aspx>WiFi Networks</asp:HyperLink></li>
                </ul>
            </li>
            <li>
                <asp:HyperLink ID=HyperLink12 runat=server NavigateUrl=~/UserSide/WhereToBuy.aspx>Where To Buy</asp:HyperLink></li>
            <li>
                <asp:HyperLink ID=HyperLink13 runat=server NavigateUrl=~/UserSide/Services.aspx>Services</asp:HyperLink></li>
            <li>
                <asp:HyperLink ID=HyperLink14 runat=server NavigateUrl=~/UserSide/ContactUs.aspx>Contact Us</asp:HyperLink></li>
        </ul>
    </div>

#navigation {
    background: #303030;
    display: block;
    width: 100%;
    float: left;
    max-height: 52px;
    margin: 0 0 15px 0;
}

#navigation ul,
#navigation li {
    list-style:none;
    padding:0;
    margin:0;
    display:inline;
}
#navigation ul li{
    float:left;
    position:relative;
}

#navigation ul li a { 
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    padding: 17px 25px;
    background: url(../images/navigation-divider.png) no-repeat right 50%;
}

#navigation ul li a:hover,
#current:hover 
{
    background: #72b626 !important;
    color: #fff;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#navigation ul ul {
    position: absolute;
    display: none;
    top: 51px;
    left: 0;
    background: #303030;
    z-index: 1000;
}

#navigation ul ul li a {color: #aaa;}
#navigation ul ul li a:hover {
    color: #fff;
}

#navigation ul ul li a {
    display: block;
    width: 150px;
    margin: 0;
    padding: 9px 18px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 12px;
    border-bottom: 1px solid #404040;
    background: none;
}

#navigation ul ul ul { 
    position: absolute; 
    top:0px; 
    left:100%; 
    z-index: 999;
}

#navigation ul ul ul li a { 
    border-bottom: 1px solid #404040 !important;
    border-top: 1px solid transparent;
    background: none;
}

#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {border-bottom: 1px solid transparent}
#navigation ul ul ul li:last-child a {border-bottom: 1px solid transparent !important}
#navigation ul li:hover>ul {opacity: 1; position:absolute; top:99%; left:0;}
#navigation ul ul li:hover>ul {position:absolute; top:0; left:100%; opacity: 1; z-index:497;}
#navigation ul li:hover > a {background: #72b626;}
#navigation ul ul li:hover > a {color: #fff;}

When I hover on Products the next list must pop out, but it’s only working when I am on my Home page. It doesn’t pop out when I am on any page inside a folder.
Any help? Please

Answer 1

You should provide more information . what do you use to pop up the sub menu ? css or javascript ( jquery ) ?

I guess , the problem is the src of your css/javascript file . It sounds it is relative and when you get to folders it can’t find the css/script file. try to make it absolute.

if your address is like http://localhost:1000/MySiteName/ then

try:

<script src="/MySiteName/scripts/script.js">

instead of :

<script src="scripts/script.js">