CODEWITHSUNDEEP
htmlcss
Justmac
Justmac

Reputation: 550

How to css this?

I have a menu structure like this:

* Alpina
      o Jongensfietsen
      o Meisjesfietsen
* Loekie
      o Jongensfietsen
      o Meisjesfietsen
* Batavus
      o Jongensfietsen
      o Meisjesfietsen
* Gazelle
      o Jongensfietsen
      o Meisjesfietsen

What I want is to give:

Alpina a green color #13721B
Loekie a yellow color #edd938
Batavus a blue color #93bffd
Gazelle a red color #e22344

Also I want to give:

All "jongensfietsen" a blue color #2B70DC
All "Meisjesfietsen" a pink color #D47AA9

How to css this?

  <div class="side-nav">
            <ul id="side-nav">
                        <li onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)" class="level0 nav-1 parent">
    <a href="http://www.mywebsite.nl/alpina.html">
    <span>Alpina</span>
    </a>
    <ul class="level0">
    <li class="level1 nav-1-1 first">
    <a href="http://www.mywebsite.nl/alpina/alpina-kinderfietsen-jongensfietsen.html">
    <span>Jongensfietsen</span>
    </a>
    </li><li class="level1 nav-1-2 last">
    <a href="http://www.mywebsite.nl/alpina/alpina-kinderfietsen-meisjesfietsen.html">
    <span>Meisjesfietsen</span>
    </a>
    </li>
    </ul>
    </li>                    <li onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)" class="level0 nav-2 parent">
    <a href="http://www.mywebsite.nl/loekie-1.html">
    <span>Loekie</span>
    </a>
    <ul class="level0">
    <li class="level1 nav-2-1 first">
    <a href="http://www.mywebsite.nl/loekie-1/jongensfietsen.html">
    <span>Jongensfietsen</span>
    </a>
    </li><li class="level1 nav-2-2 last">
    <a href="http://www.mywebsite.nl/loekie-1/meisjesfietsen.html">
    <span>Meisjesfietsen</span>
    </a>
    </li>
    </ul>
    </li>                    <li onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)" class="level0 nav-3 parent">
    <a href="http://www.mywebsite.nl/batavus.html">
    <span>Batavus</span>
    </a>
    <ul class="level0">
    <li class="level1 nav-3-1 first">
    <a href="http://www.mywebsite.nl/batavus/jongensfietsen.html">
    <span>Jongensfietsen</span>
    </a>
    </li><li class="level1 nav-3-2 last">
    <a href="http://www.mywebsite.nl/batavus/meisjesfietsen.html">
    <span>Meisjesfietsen</span>
    </a>
    </li>
    </ul>
    </li>                    <li onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)" class="level0 nav-4 parent">
    <a href="http://www.mywebsite.nl/gazelle.html">
    <span>Gazelle</span>
    </a>
    <ul class="level0">
    <li class="level1 nav-4-1 first">
    <a href="http://www.mywebsite.nl/gazelle/jongensfietsen.html">
    <span>Jongensfietsen</span>
    </a>
    </li><li class="level1 nav-4-2 last">
    <a href="http://www.mywebsite.nl/gazelle/meisjesfietsen.html">
    <span>Meisjesfietsen</span>
    </a>
    </li>
    </ul>
    </li>                </ul>
            </div>

Upvotes: 0

Views: 6693

Answers (3)

Marcel
Marcel

Reputation: 28087

The CSS is pretty basic:

.nav-1 a { color:#13721b; }
.nav-2 a { color:#edd938; }
.nav-3 a { color:#93bffd; }
.nav-4 a { color:#e22344; }
.parent .first a { color:#2b70dc; }
.parent .last a { color:#d47aa9; }

Demo: jsfiddle.net/Ztphn (a little more verbose)

Upvotes: 2

danjah
danjah

Reputation: 3059

<style type="text/css">
.nav-1 { color: #13721B; }
.nav-2 { color: #edd938; }
.nav-3 { color: #93bffd; }
.nav-4 { color: #e22344; }
    .level0 .first { color:#2B70DC; }
    .level0 .last { color:#D47AA9; }
</style>

You also may need to specify further on you nested <a> elements, if there are already styles applied to them., for example:

.level0 .first a { color:#2B70DC; }
.level0 .last a { color:#D47AA9; }

Upvotes: 2

painotpi
painotpi

Reputation: 6996

use this <span style = "color:#93bffd">Loekie</span> .. You can style the other stuff similarly !

Upvotes: -1

Related Questions