asked on

Targeting Menu Elements without Class or IDs

Greetings,

Attached is the markup for a menu bar. I want to target the a element of Main Item 6 with a style so I can affect it's right margin. Here's what I thought would work:

ul ul ul ul li li li a

{

margin-right: -2px;

}

Unfortunately, it didn't work. Question: where am I going wrong? How would target that particular element without using any class or id hook, just vanilla xhtml?

<ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Main Item 1</a>
    <ul>
        <li><a href="#">Sub Item 1</a></li>
        <li><a href="#">Sub Item 2</a></li>
        <li><a href="#">Sub Item 3</a></li>
      </ul>
    </li>
    <li><a href="#">Main Item 2</a>
    <ul>
    	<li><a href="#">Sub Item 4</a></li>
    	<li><a href="#">Sub Item 5</a></li>
    	<li><a href="#">Sub Item 6</a></li>
    	<li><a href="#">Sub Item 7</a></li>
     </ul>
    </li>
    <li><a href="#">Main Item 3</a></li>
    <li><a href="#">Main Item 4</a></li>
    <li><a href="#">Main Item 5</a>
    <ul id="life">
        <li><a href="#">Sub Item 8</a></li>
        <li><a href="#">Sub Item 9</a></li>
      </ul>
    </li>
    <li><a href="#">Main Item 6</a>
      <ul>
            <li><a href="#">Sub Item 10</a></li>
            <li><a href="#">Sub Item 11</a></li>
      </ul>
    </li> 
  </ul>

Open in new window

wdfdo1986

do u want to set this to only a particular href link?

ASKER CERTIFIED SOLUTION

remorina

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

vimalraja

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

max7

ASKER

I greatly appreciate the responses; I will get back to you some time tomorrow after I've had time to work with them and see what happens.

max7

ASKER

Remorina's solution worked without trouble ... although I didn't mention this in my original posting, I also have a secondary menu bar in the footer of this website. When I instituted your styles it removed the right border of the first list item (in IE 7&8) in this secondary menu ... I used the right borders on these elements as a separator. I could not find a way to fix and limit this style from being applied only to the main menu.

But I believe that is another question ...