Have tried, tried and tried - how do I add an extra level to this menu

Hi,
I cant access the url you have provided
can you just put the code over here so that we can give some good solution
code is both html and Css code

Hi mahesh2010,

You can try Contest A/S - IT-infrastruktur, -sikkerhed, -drift, og -udvikling.

Here's the css code:

Here's the html code (it's in a table):

Note, in the html code I have not added the third level, since I could not figure out how to do it.

Thanks alot for taking the time.

Best regards,
Thomas

Typically menus are unordered lists nested in line items or LI's.

See how your code starts here... Your first UL
Starting Unordered list. Then you have line items in that so it looks like this...
Then you can see your first nested UL... It starts before the line item ends
See how the LI doesn't end after the span (above), the UL starts immediately. So what you want to do is this.......
Take this part...
And nest a UL in it, kind of like this...

So you're nesting a UL inside of the line item you want it to show under, then you just have to modify using CSS so it looks right.

Sorry if this isn't super easy or clear, working with menus is a bit difficult sometimes.

Thanks, crushthenet.
However, the issue seems to rise when I add the third level UL.
I think it's because the CSS is not set up to handle it. Any input on that part?

Thanks.

Best regards,
Thomas

Any input on the CSS?

Thanks.

BR,
Thomas

Why the hell experts are for? Go and directly ask them for help rather than wasting time and effort.

.nav-container-outer{
position:absolute;
z-index:1;
padding: 0px;
height: 25px;

}

.float-left{
float: left;
}
.float-right{
float: right;
}


.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;

}


.nav-container .divider-vert{
float:left;
width:0px;
display: none;

}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}

.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}


.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
float: left;

}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/
#nav-container a{
padding:0px 4px 7px 2px;
margin: 1px 0px 0px 0px;
color: #FFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:1.2em;
text-decoration:none;
font-weight: bold;
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #FF0000;

background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:3px 4px 0px 4px;
margin:0px 0px 0px 0px;
background-repeat: repeat-x;
background-color: #000;
border-bottom: 1px solid #000;
}

/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;

background-repeat: no-repeat;
background-position: 0px 22px;
font-size:1.2em;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-repeat: no-repeat;
color:#ff9600;
}

/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #000;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:12px;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #152066;
}

/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

/* CSS for testimonials */
#sfstest-sidebar blockquote { padding: 2px; }
#sfstest-sidebar cite { font-style: italic; }
#sfstest-page blockquote { padding: 10px; }
#sfstest-page cite { font-style: italic; }
#sfstest-sidebar .sfststreadmore { text-align: center; margin-top: 5px; }

#sfstest-page .align-right { float:right; margin: 0 0 5px 5px; }
#sfstest-page .align-left { float:left; margin: 0 5px 5px 0; }






also create a a container div to put the menu in, and control it. you may need to adjust the code a bit, but i think its close to what you need ( need some color/font adjustments)




then

<div class="container">
<div class="nav-container-outer">
<ul id="nav-container" class="nav-container">

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">title here</a>
<ul style="width:185px;">
<li><a href="#">link</a></li>

<li><a class="item-primary" href="#">title here</a>
<ul style="width:185px;">
<li><a href="#">link</a></li>
</li>
</ul>

</li>
</ul>

</div>
</div>



That Should Do What You Need

Thomas - the original Suckerfish menu that you're basing yours from includes nesting 2 levels deep, and instructions for taking it even beyond that. The CSS is all there in the original, just copy/paste and tweak.

@Evan: Thanks alot, I will check that out and let you know.

@Steve: Thanks, Steve. I'm not sure which css elements to add, to handle the third level?

Best regards,
Thomas

@Evan, the code only seems to show one level.

BR,
Thomas

@Evan, Tried again and still get the same result.

Thanks for taking the time though.

Best regards,
Thomas