CSS Using 2 classes on a UL 1

[wbg34]

I am trying to impliment a Horizontal CSS based menu. The problem that I am having is that I want the last two elements of my Menu to dropdown to the left instead of the right. I was able to modify my original CSS to make that happen, but it happens to the entire menu not just the final elements.

I took the modified CSS and created a second class and want to apply that class to the last two elements. Unfortunately, when I do this the menu is still only using the initial CSS class.

An example of what I am trying to accomplish follows:

<!--Default Class for the menu all elements drop to the right-->
<ul class="menulist" id="listMenuRoot">
<li><a href="">Home</a></li>
<li><a href="">Submenu</a>
<ul>
<li><a href="">Here's a submenu item.</a></li>
<li><a href="">Here's another submenu item.</a></li>
</ul>
</li>

<!--2nd Class for the menu elements should drop to the left-->
<li class="menuright"><a href="">Submenu 2</a>

<!--No matter where I apply the Class the main class is overriding it-->
<ul class="menuright">
<li><a href="">Nested menu 1</a>
<ul>
<li><a href="">Here's a submenu item.</a></li>
<li><a href="">Here's another submenu item.</a></li>
</ul>
</li>
<li><a href="">Nested menu 2</a>
<ul>
<li><a href="">Another nested menu.</a></li>
<li><a href="">Here's another submenu item.</a></li>
</ul>
</li>
<li><a href="">Here's another submenu item.</a></li>
<li><a href="">Here's another submenu item.</a></li>
</ul>
</li>
<li><a href="">The End!</a></li>
</ul>

 

[Vragabond]

Hard to tell without seeing your css, but it looks like you're being victim to a importance issue that is often overlooked. The way CSS works is that usually a declaration below will override the declaration above it. However, there are certain declarations that take precedence. If you have something like this:

#listMenuRoot li {
  color: blue;
}

.menuright {
  color: red;
}

the resulting li element will have blue colored text, since the upper declaration is deemed more important. You can however change this to use the same format:

#listMenuRoot li {
  color: blue;
}

#listMenuRoot .menuright {
  color: red;
}

and now the li will be colored red. Without seeing how you did it, this is the best guess I can make.

 

[wbg34]

Original CSS:
/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
visibility: hidden;
position: absolute;
top: 2.5em; /* I'm using ems rather than px to allow people to zoom their font */
left: 1px;
width: 150px;
overflow:visible;
}

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
top: 0px;
left: 155px;
overflow: Visible;
}

Modified CSS:
/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menuright ul {
visibility: hidden;
position: absolute;
top: 2.5em; /* I'm using ems rather than px to allow people to zoom their font */
right: 1px;
width: 150px;
overflow:visible;
}

/* Second and third etc. level submenus - position across from parent instead */
.menuright ul ul {
top: 0px;
right: 155px;
overflow: Visible;
}

There are other CSS statements of course, but these are the only ones that need to be modified to produce the desired behavior.

 

[jemminger]

you can also apply more than one class to an element on the html:

.foo { color:red; }
.bar { background-color:yellow; }

<div class="foo bar">foo and bar</div>

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[ChrisHunt]

I don't think your problem is that the [tt]menuright[/tt] rule doesn't get applied, it's that it does, but that the [tt]left: 1px;[/tt] rule is being inherited and applied in preference to the [tt]right: 1px;[/tt] rule. You can prove it if you download and install the Web Developers Toolbar on Firefox, it provides a really nifty function where you can click on an element and it tells you what CSS rules apply to it.

If I'm right, I don't know of a way to reset the [tt]left[/tt] property. You're going to have to change your code to something like this:

/* Generic properties applying to all menu items, both directions */
.menulist ul {
 visibility: hidden;
 position: absolute;
 top: 2.5em;
 width: 150px;
 overflow:visible;
}

.menulist ul ul {
 top: 0px;
 overflow: Visible;
}

/* Now add in left and right positioning as required */

.menuleft ul {
   left: 1px;
}

.menuleft ul ul {
   left: 155px;
}

.menuright ul {
 right: 1px;
}

.menuright ul ul {
 right: 155px;
}

Your HTML would look like this:

<ul class="menulist" id="listMenuRoot">
  <li><a href="">Home</a></li>
  <li class="menuleft"><a href="">Submenu</a>
     <ul>
    <li><a href="">Here's a submenu item.</a></li>
    <li><a href="">Here's another submenu item.</a></li>
    </ul>
  </li>

  <!--2nd Class for the menu elements should drop to the left-->
  <li class="menuright"><a href="">Submenu 2</a>
    <ul>
    <li><a href="">Nested menu 1</a>
      <ul>
        <li><a href="">Here's a submenu item.</a></li>
        <li><a href="">Here's another submenu item.</a></li>
         </ul>
    </li>
    <li><a href="">Nested menu 2</a>
     <ul>
        <li><a href="">Another nested menu.</a></li>
        <li><a href="">Here's another submenu item.</a></li>
    </ul>
      </li>
    <li><a href="">Here's another submenu item.</a></li>
    <li><a href="">Here's another submenu item.</a></li>
    </ul>
  </li>
  <li><a href="">The End!</a></li>
</ul>

I've not tested this - I'm sure it'll need more work to get it right - but hopefully it'll put you on the right track.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[wbg34]

Chris,
Your thoughts were dead on. Thanks a million.

P.S. Thanks for the tip on the Firefox extension. I've been like a kid in a candy store with that thing.