Вот что у меня получилось:
Html
<head>
<link rel="stylesheet" href="http://www.netdreams.co.uk/wp- content/themes/netdreams/css/blue/colour.css" type="text/css" media="all" />
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="nav">
<ul>
<li id="h"><a href="http://www.netdreams.co.uk" class="on">Home</a></li>
<li id="w"><a href="http://www.netdreams.co.uk/index.php/what-we-do/">What We Do</a></li>
<li id="s"><a href="http://www.netdreams.co.uk/index.php/showcase/">Showcase</a></li>
<li id="v"><a href="http://www.netdreams.co.uk/index.php/video/">Video</a></li>
<li id="b"><a href="http://www.netdreams.co.uk/index.php/blog/">Blog</a></li>
<li id="c"><a href="http://www.netdreams.co.uk/index.php/contact/">Contact</a></li>
</ul>
</div>
</body>
Style.css
.div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url(css/images/nav-bg.png) 0 0 no-repeat;
}
.div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
.div#nav ul li{
float:left;
height:52px;
}
.div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
.div#top div#nav ul li#h a{width:98px;background-position:0 0;}
.div#top div#nav ul li#w a{width:134px;background-position:-98px 0;}
.div#top div#nav ul li#s a{width:123px;background-position:-232px 0;}
.div#top div#nav ul li#v a{width:95px;background-position:-355px 0;}
.div#top div#nav ul li#b a{width:89px;background-position:-450px 0;}
.div#top div#nav ul li#c a{width:114px;background-position:-539px 0;}
.div#top div#nav ul li#h a:hover,div#top div#nav ul li#h a.on{background-position:0
-52px;}
.div#top div#nav ul li#w a:hover,div#top div#nav ul li#w a.on{background-
position:-98px -52px;}
.div#top div#nav ul li#s a:hover,div#top div#nav ul li#s a.on{background-
position:-232px -52px;}
.div#top div#nav ul li#v a:hover,div#top div#nav ul li#v a.on{background-
position:-355px -52px;}
.div#top div#nav ul li#b a:hover,div#top div#nav ul li#b a.on{background-
position:-450px -52px;}
.div#top div#nav ul li#c a:hover,div#top div#nav ul li#c a.on{background-
position:-539px -52px;}
.div#top div#nav a.mca{
float:right;
width:118px;
height:28px;
display:inline;
text-indent:-9999px;
margin:11px 10px 0 0;
background:url(css/images/media-centre.png) 0 -28px no-repeat;
}
.div#top div#nav a#mc-pulse{
display:none;
margin-right:-118px;
background-image:url(css/images/media-centre-pulse.png);
}
.div#top div#nav a.t{
background-position:0 0;
}
Сolour.css
.div#nav ul li a{background:url(nav.png) no-repeat;}
Подскажите что не так и что добавить ещё надо?
Пустяковое же дело для вас =)) Если бы всё с одного css подключалось и сам бы сделал...
Я уже запутался что куда, Сolour.css в нём блок картинки url(nav.png) и где она должна располагаться?