How to have a changing background on a menu depending on selected item_问答_开发者

This is daunting me and I can't see the way to go. This is the first time I put a question here, so correct me if I´m not following protocol. Thanks!!!

I need the background of the menu to change according to the selected item so when active, the items to the left will show in orange while keeping the items on the right in gray.

Also, 开发者_如何学编程the triangle separating the colors have to keep to the right of the active menu item.

For the first element, is easy, but the second and forward, I cant make the code work as it cuts on the boundaries of the menu.

For example, I have [individuos] [empresas] [corredores] [proveedores]

When empresas is active, individuos and empresas should be orange while corredores and provedores should be gray.

If corredores is selected, then individuos, empresas and corredores should be orange while proveedores is gray.

I wanted to post an image to illustrate but as newbie I am not allowed.

#navigation {
  position: absolute;
  line-height: 40px;
  padding: 0;
  margin: 0;
  margin-left: 210px;
  width: 730px;
  background-color: #757373;
}

#navigation ul li a {
  text-decoration: none;
  float: left;
  padding: 0 40px 0 10px;
}

#navigation .empresas .active {
  background: url(images/the-background.png) no-repeat right;
}

This one is good

How to have a changing background on a menu depending on selected item

This one is not, see that INDIVIDUOS should be orange

How to have a changing background on a menu depending on selected item

Maybe this fiddle provides some inspiration?

CSS:

#navigation li {
    background-color: #ffa500;
}
#navigation li.active+li,
#navigation li.active+li+li,
#navigation li.active+li+li+li,
#navigation li.active+li+li+li+li,
#navigation li.active+li+li+li+li+li {
    background-color: #757373;
}

HTML:

<div id="navigation">
    <ul>
        <li><a href="">professionals</a></li>
        <li><a href="">organizations</a></li>
        <li class="active"><a href="">others</a></li>
        <li><a href="">others2</a></li>
    </ul>
</div>

Update

See updated fiddle with the "arrow" and more. If you want this to work also in IE7, then add span elements instead of using :before and :after.

THE SOLUTION Ok, problem solved and it was the cleanest trick I´ve seen. I did not need to add anything else to the php, classes or the like. The solution was pointed by a colleague. All that it was needed was some trickery with z-index and positioning. Thank @peter and @PeterSmith for your input.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo menú</title>

<style type="text/css">

ul { list-style-type: none; }

ul li { display: inline; position: absolute; text-align: right; }

a { position: absolute; }

.uno { border: 1px #FF6600 solid; z-index: 4; width: 100px; }
a.uno:hover { background: #FF6600; }

.dos { border: 1px #FF6600 solid; z-index: 3; width: 200px; }
a.dos:hover { background: #FF6600; }

.tres { border: 1px #FF6600 solid; z-index: 2; width: 300px; }
a.tres:hover { background: #FF6600; }

.cuatro { border: 1px #FF6600 solid; z-index: 1; width: 400px; }
a.cuatro:hover { background: #FF6600; }

</style>

</head>

<body>
<ul>
<li><a href="" class="uno">PRUEBA 1</a></li>
<li><a href="" class="dos">PRUEBA 2</a></li>
<li><a href="" class="tres">PRUEBA 3</a></li>
<li><a href="" class="cuatro">PRUEBA 4</a></li>
</ul>
</body>
</html>

Edit: Just saw your latest comment below about the .active class.

If you can add some javascript to your pages, you could run through a for loop for each li item, appending "orange" to its class, until you find the .active class, then the rest would have "grey" appended to the class. I'll try a fiddler later when I've got some free time