padding:5px 12px;

Hi, have you tried something like this?:

var elem=getElementById('someID');  // you probably have the object already (e.g. "this")
var parentE=elem.parentNode;
parentE.style.width=elem.style.width;

is its a menu then using display: block and going further into a list item and its children will keep all styles applied to parents intact.

but otherwise i don't think there is css support for tracking down and element's parent.

there are :child pseudo selectors .. with limited browser support.. but i dont think w3c even has a draft spec for parent selectors.

im thinking javascript would be required to traverse the DOM and find the parent and then apply styles to it.

Hi ,

Yes, i tried using this function:

function parentstyle(elem) {
       var parentE=elem.parentNode;
       var parentEE=parentE.parentNode;
       parentEE.className="parent";
    }

which is called on the child list item with this:
onMouseOver="parentstyle(this);"

This works fine in Firefox, but doesnt work in IE or Opera.

>This works fine in Firefox, but doesnt work in IE or Opera.

It works for me in IE6 and O9... (and of course FF)
Could you post (the relevant part of) your HTML?

Hi,

Yes , html below and css for the anchor tag background image i want to maintain:

<div id="primary_nav">
          <ul>
           <li><a href="index.html">Home</a></li>
             <li><a href="">products</a></li>
             <li><a href="">partners</a></li>
             <li><a href="">explore technologies</a></li>
             <li><a href="">Applications</a></li>
             <li><a href="">Purchase</a></li>
             <li><a href="">support &amp; services</a>
              <ul>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);"><a href="">Universal</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);"><a href="">V-series</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);"><a href="">Software product</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);"><a href="">software drivers</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);" id="child"><a href="">software development fdfvfev ef ef df</a></li>
               <li onMouseOver="parentstyle(this);" onMouseOut="parentstyleout(this);" id="child"><a href="">support services</a></li>
               <li class="last"><span></span></li>
              </ul>
             </li>
             <li><a href="">news &amp; events</a></li>
             <li><a href="">about us</a></li>
             <li><a href="">Contact Us</a></li>
             <li ><a href="">Training</a></li>
          </ul>
        </div>


div#primary_nav ul li a:hover, div#primary_nav ul li.parent a {
   background:url('images/primary-hover-back.gif') no-repeat top right;
   color:#fff
}
div#primary_nav ul li ul li a:hover, div#primary_nav ul li.parent ul li a {
  background-image:none
}

you could posibbly do the following:

give the <ul> an id name e.g. <ul id="unOrderedList">

and in the style sheet do the following:

#unOrderedList > li {
...
put you styling in here
...
}

This should make all <li> under the <ul id="unOrderedList"> have the same css styling.

Hi,

Yes, but i only need to put the styling on when a list item is hovered over. If i did this wouldnt all list items have the same styling?

Your js+html example still works for me, the parent <li> (the "grandparent" element ) - ("support & services") is being assigned the "parent" class.
I don't think the problem is the parentstyle() function...

Hi Tname

Your right, it does work actually - thanks
However, i also have a function for IE that enables list items to have a class associated to them when they are hovered over(see below). This seems to stop the other function working - perhaps because two classes are being assigned. Is there a way around this?

sfHover = function() {
      var sfEls = document.getElementById("primary_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);

>>perhaps because two classes are being assigned. Is there a way around this?
>No, but because a function

Here I meant "no, not this is the reason" and not "no there's no way around this"   :)

And do the same with the mouseout event of course:

sfHover = function() {
      var sfEls = document.getElementById("primary_nav").getElementsByTagName("li");
      for (var i=0; i<sfEls.length; i++) {
           
            sfEls[i].onmouseover=function() {
                 if (this.name=='special') parentstyle(this);  
                   this.className+=" sfhover";
            }
           
            sfEls[i].onmouseout=function() {
                 if (this.name=='special') parentstyleout(this);   //  <---------------------------------------  HERE
                   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
       }
    }
     
if (window.attachEvent) window.attachEvent("onload", sfHover);

perfect thanks for your help

actually, sorry,

this doesnt seem to work in opera.

its fine in IE and firefox however.

Any ideas?

your original answer with name="special" seemed to work
thanks a lot

Try "title" instead of  "name" :

if (this.title=='special') parentstyle(this);

and

 <li title="special" onMouseOver="parentstyle(this);"  ...



This should work with Opera too.