Need some help with menu

HTML & CSS
1

Hi lads and gents,
first of all, sorry for my lang (I´m from Austria)
second - I just working on some one page site and I stuck on some colors and links.
Let me explain:
The site have gradient background (as seen on attach), link container is also gradient (but reverse) and I want to first 2 links appear in different colors than other 2, and hover should be revers… if u all know what I mean
In the middle is logo.
So, I need 1st and second to be black and white on hover (block), and 3rd and 4th to be white, and dark on hover.
And, oc, I want to make this responsible (if this is possible)
This is I have for now.

[code]<!doctype html>

Some title body { background: #282828; /* Old browsers */ background: -moz-linear-gradient(left, #282828

0%, #282828 50%, #ffffff 50%, #ffffff 100%); /* FF3.6+

*/
background: -webkit-gradient(linear, left top,

right top, color-stop(0%,#282828), color-stop

(50%,#282828), color-stop(50%,#ffffff), color-stop

(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,

#282828 0%,#282828 50%,#ffffff 50%,#ffffff 100%); /*

Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #282828

0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* Opera

11.10+ */
background: -ms-linear-gradient(left, #282828

0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to right, #282828

0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(

startColorstr=‘#282828’,

endColorstr=‘#ffffff’,GradientType=1 ); /* IE6-9 */

}

body { background-color: #FFFFFF; color: #000000; font-family: Arial; font-size: 13px; margin: 0; padding: 0; } #container { width:960px; margin:100px auto; padding:auto 0 30px; /*for testing */ background: #ffffff; background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #282828 50%, #282828 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop (50%,#282828), color-stop(100%,#282828)); background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#282828 50%,#282828 100%); background: -o-linear-gradient(left, #ffffff 0%,#ffffff 50%,#282828 50%,#282828 100%); background: -ms-linear-gradient(left, #ffffff 0%,#ffffff 50%,#282828 50%,#282828 100%); background: linear-gradient(to right, #ffffff 0%,#ffffff 50%,#282828 50%,#282828 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#282828',GradientType=1 ); } #nav { height:73px; margin:0; padding:0; list-style-type:none; } #nav li { float:left; width:190px; margin:0 1px; } #nav a { display: block; padding-top: 25px; text-align: center; font-size: 1.3em; font-weight: bold; color: #282828; text-decoration: none; text-align: center; } #nav a:hover,#nav { color:#ffffff; } #nav img { display:block; width:184px; height:73px; margin:auto; }
[/code]

And here ist screenshoot (I´m new member and cannot post image)

2

Could you not just assign a class to the first two anchors and set it on hover to do your aesthetic requirements? Do the same for the right two links?

Are you still in the process of learning CSS? I do not mean to be rude here but if I’m understanding you correctly, this is basic CSS.

Please do not take offense.

3

IMHO, the best way would be to add a class to the LI containing the image, which , btw, would also allow you to employ some IMG replacement techniques as well:

 <li class="logo">My Company Name</li>

#nav a {color:#000;}
#nav .logo~li {color:#fff;}
#nav .logo{ 
position:relative;
height:130px;
width:293px;
overflow:hidden;
}
#nav .logo:after{ 
content: url("http://s29.postimg.org/5601l07yv/img0001.png" );
position:absolute;
top:0;
left:0;

}

hope that helps