DropDown-Nav: 2nd level not displayed in different border

[Raggi]

Hi,

I have got my DropDown-Navigation working.

still missing and here I need your help:
- 1st level should be in red border
- 2nd in grey border

So there is one red border and directly below a grey border

I tried now many different ways but I always get the 2nd level displayed in the red border.

the html of my list:

<li><a href="#">Portfolio</a>
<ul>
<li><a href="Product1.html">Product1</a></li>
<li><a href="Product2.html">Product2</a></li>
</ul>
</li>

thank you!
Raggi

[SuzyUK]

Hi,
Not too sure what you mean without the CSS too, but:

still missing and here I need your help:
- 1st level should be in red border
- 2nd in grey border

the second level list is completely nested in the parent <li> so if the red border is around the parent (1st level) then it will be a round the whole of the child <ul> ( second level ) list too

<ul><li>parent

<ul><li>nested list</li></ul>

</li></ul>

so the outer red border will still go round the inner grey border too..

post some CSS as well if you can, it might help us to see what you want, if I've not understood the question properly

Suzy

[Raggi]

SuzyUK,
a bit late but I am back now at this project.

here is my HTML, so you can see that I use <ul> only once

<li><a href="#">Portfolio</a>
<ul>
<li><a href="Service1.html">Service1</a></li>
<li><a href="Service2.html">Service2</a></li>
<li><a href="Service3.html">Service3</a></li>
</ul>
</li>

my question: how can show Level1 ("Portfolio") in a red box and Level2("Service1,2,3") in a grey box?

my CSS which provides a dropdown-functionality:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Verdana;
font-size: 12px;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;

}

</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->

<script language="javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>