How to define that by default there should be shown the content of submenu11

Question

0

Asked: June 3, 20262026-06-03T06:45:49+00:00 2026-06-03T06:45:49+00:00

How to define that by default there should be shown the content of submenu11

0

How to define that by default there should be shown the content of “submenu11” under ther “menu1”?

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
        <ul id="css3menu1" class="menu">
        <li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
                <ul>
                    <li><a href="#submenu11">SUBMENU11</a></li>
                    <li><a href="#submenu12">SUBMENU12</a></li>
                    <li><a href="#submenu13">SUBMENU13</a></li>
                    <li><a href="#submenu14">SUBMENU14</a></li>
                </ul></li>
                <li class="menu"><a href="#menu2" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/schedule.png"/>MENU2</a></li>
                <li class="menu"><a href="#menu3" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/analysis.png"/>MENU3</a></li>
                <li class="toplast"><a href="#menu4" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/gps.png"/>MENU4</a></li>
            </ul>

    <div id='submenu11'>
    <p> Content </p>
    </div>

    <div id='submenu12'>
    <p> Content </p>
    </div>

    <div id='submenu13'>
    <p> Content </p>
    </div>

    <div id='submenu14'>
    <p> Content </p>
    </div>

    <script>
        $('ul.menu').each(function() {
            var $active, $content, $links = $(this).find('a');
            $active = $links.first().addClass('active');
            $content = $($active.attr('href'));
            $links.not(':first').each(function() {
                $($(this).attr('href')).hide();
            });

            $(this).on('click', 'a', function(e) {
                $active.removeClass('active');
                $content.hide();
                $active = $(this);
                $content = $($(this).attr('href'));
                $active.addClass('active');
                $content.show();
                e.preventDefault();
            });
        });
    </script>
</body>

CSS stylesheet:

html,body {
    font: normal .8em/1.5em Arial, Helvetica, sans-serif;
    background: #ffffff;
    width: 100%;
    margin: 0px auto;
}

p {
    margin: 0 0 2em;
}

h1 {
    margin: 0;
    font:bold 12px Arial;
}

h2 {
    margin:0;
    color: #55aaff;
    font:bold 12px Arial;
}

h3 {
    margin:0;
    font:normal 10px Arial;
}

h4 {
    margin:0;
    font:normal 12px Arial;
}

a {
    color: #339;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

div#header {
    padding:1em;
    background:#00557f 100% 10px no-repeat;
    border-bottom:6px double gray;
}

div#header p {
    font:normal 10px Arial;
    text-align:right;
    color:#b7ddf2;
    margin:0;
}

div.scrollbar {
    height: 300px;
    overflow: auto;
    border: solid 1px #000;
    padding: 5px;
}

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}

div#content p {
    text-align:justify;
    padding:0 1em;
}

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    padding:1em;
    background:#ddd 98% 10px no-repeat;
    border-bottom:6px double gray;
}
div#footer p {
    font-style:italic;
    font-size:1.1em;
    margin:0;
}

/* ----------- Menu ----------- */
ul#css3menu1,ul#css3menu1 ul{
    margin:0;
    list-style:none;
    padding:0;
    background-color:#dedede;
    border-width:1px;
    border-style:solid;
    border-color:#b7ddf2;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
ul#css3menu1 ul{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    -moz-box-shadow:3.5px 3.5px 5px #000000;
    -webkit-box-shadow:3.5px 3.5px 5px #000000;
    box-shadow:3.5px 3.5px 5px #000000;
    background-color:#FFFFFF;border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-color:#d4d4d4;
    padding:0 10px 10px;
}
ul#css3menu1 li:hover>*{
    display:block;
}
ul#css3menu1 li{
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
ul#css3menu1 li:hover{
    z-index:1;
}
ul#css3menu1{
    font-size:0;
    z-index:999;
    position:relative;
    display:inline-block;
    zoom:1;
    *display:inline;
}
ul#css3menu1>li{
    margin:0;
}
* html ul#css3menu1 li a{
    display:inline-block;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;
}
ul#css3menu1 a{
    display:block;
    vertical-align:middle;
    text-align:left;
    text-decoration:none;
    font:bold 12px Arial;
    color:#000000;
    text-shadow:#FFF 0 0 1px;
    cursor:pointer;
    padding:10px;
    background-color:#ebf4fb;
    background-image:url("mainbk.png");
    background-repeat:repeat;
    background-position:0 0;
    border-width:0 0 0 1px;
    border-style:solid;
    border-color:#C0C0C0;
}
ul#css3menu1 ul li{
    float:none;
    margin:10px 0 0;
}
ul#css3menu1 ul a{
    text-align:left;
    padding:4px;
    background-color:#FFFFFF;
    background-image:none;
    border-width:0;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    font:11px Arial;
    color:#000;
    text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
    background-color:#b7ddf2;
    border-color:#C0C0C0;
    border-style:solid;
    color:#000000;
    text-decoration:none;
    text-shadow:#FFF 0 0 1px;
    background-position:0 100px;
}
ul#css3menu1 img{
    border:none;
    vertical-align:middle;
    margin-right:10px;
}
ul#css3menu1 img.over{
    display:none;
}
ul#css3menu1 li:hover > a img.def{
    display:none;
}
ul#css3menu1 li:hover > a img.over{
    display:inline;
}
ul#css3menu1 li a.pressed img.over{
    display:inline;
}
ul#css3menu1 li a.pressed img.def{
    display:none;
}
ul#css3menu1 span{
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
    background-color:#b7ddf2;
    background-position:0 100px;
    border-style:solid;
    border-color:#C0C0C0;
    color:#000000;
    text-decoration:none;
    text-shadow:#FFF 0 0 1px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
    background-color:#FFFFFF;
    background-image:none;
    color:#868686;
    text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
    border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
}
ul#css3menu1 li.toplast>a{
    border-radius:0 5px 5px 0;
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
}
/* --------- End of Menu --------- */

EDIT1: I included the script and stylesheet. enter image description here

EDIT2: Please look at the picture. It should clarify the issue.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-03T06:45:50+00:00

The problem is in this line:

 $active = $links.first().addClass('active');

It takes the first link in your menu and makes it active. Your first <a> tag in the ul with class menu is not the first menu item, but:

<a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>

So you need to make sure you target the first menu item. You can for example assign an id to it:

<li><a href="#submenu11" id="submenu-default">SUBMENU11</a></li>

and then you have to rewrite that line of javascript to:

$active = $('#submenu-default').addClass('active');

That should do the trick. Obviously you can use any other way to locate that link.

EDIT: Maybe even better solution would be to rewrite your html as follows:

<ul id="css3menu1">
    <li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
            <ul  class="menu">
                <li><a href="#submenu11">SUBMENU11</a></li>
                <li><a href="#submenu12">SUBMENU12</a></li>
                <li><a href="#submenu13">SUBMENU13</a></li>
                <li><a href="#submenu14">SUBMENU14</a></li>
            </ul></li>
            <li class="menu"><a href="#menu2" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/schedule.png"/>MENU2</a></li>
            <li class="menu"><a href="#menu3" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/analysis.png"/>MENU3</a></li>
            <li class="toplast"><a href="#menu4" style="height:40px;line-height:40px;"><img src="menu_files/css3menu1/gps.png"/>MENU4</a></li>
        </ul>

This way you don’t have to change the javascript, as the first link in the menu now indeed is the first item of the menu. I leave it for you to find out what works best for you.

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

How to define that by default there should be shown the content of submenu11

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply