Помогите адаптировать css

Здравствуйте уважаемые профи. Случилась у меня вот какая проблема: решил я на своем сайте(wordpress) отредактировать шаблон, он у меня старый и не поддерживал произвольное меню. Полазил по интернету нашел необходимые коды, все в стало замечательно, но возникла проблема. Для этого меню необходимо написать собственный стиль. Автор конечно предоставил пробные стиль но он совершенно не вписывается в мой дизайн. Моя попытка отредактировать дизайн методом тыка, поскольку я очень плохо разбираюсь в css, закончилась провалом.

Уважаемые профессионалы, не бросите меня на произвол судьбы помогите отредактировать стиль меню в общую цветовую схему.

Стиль меню(для редактирования)

#jsddm {

    margin: 0;

    padding: 0;

}

#jsddm li {

    float: left;

    list-style: none;

    font: 12px Tahoma, Arial;

}

#jsddm li a {

    display: block;

    background:none;

    padding: 5px 12px;

    text-decoration: none;

    border-right: 1px solid white;

    width: 70px;

    color: #EAFFED;

    white-space: nowrap;

}

#jsddm li a:hover {

    background: #1A4473;

}

#jsddm li ul {

    margin: 0;

    padding: 0;

    position: absolute;

    visibility: hidden;

    border-top: 1px solid white;

}

#jsddm li ul li {

    float: none;

    display: inline;

}

#jsddm li ul li a {

    width: auto;

    background: #9F1B1B;

}

#jsddm li ul li a:hover {

    background: #7F1616;

}

стиль старого меню(образец)

/* begin Menu */

/* menu structure */



.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover

{

	text-align:left;

	text-decoration:none;

	outline:none;

	letter-spacing:normal;

	word-spacing:normal;

}



.art-menu, .art-menu ul

{

	margin: 0;

	padding: 0;

	border: 0;

	list-style-type: none;

	display: block;

}



.art-menu li

{

	margin: 0;

	padding: 0;

	border: 0;

	display: block;

	float: left;

	position: relative;

	z-index: 5;

	background:none;

}



.art-menu li:hover

{

	z-index: 10000;

	white-space: normal;

}



.art-menu li li

{

	float: none;

}



.art-menu ul

{

	visibility: hidden;

	position: absolute;

	z-index: 10;

	left: 0;

	top: 0;

	background:none;

}



.art-menu li:hover>ul

{

	visibility: visible;

	top: 100%;

}



.art-menu li li:hover>ul

{

	top: 0;

	left: 100%;

}



.art-menu:after, .art-menu ul:after

{

	content: ".";

	height: 0;

	display: block;

	visibility: hidden;

	overflow: hidden;

	clear: both;

}

.art-menu, .art-menu ul

{

	min-height: 0;

}



.art-menu ul

{

	background-image: url(images/spacer.gif);

	padding: 10px 30px 30px 30px;

	margin: -10px 0 0 -30px;

}



.art-menu ul ul

{

	padding: 30px 30px 30px 10px;

	margin: -30px 0 0 -10px;

}











/* menu structure */



.art-menu

{

	padding: 3px 3px 3px 3px;

}



.art-nav

{

	position: relative;

	height: 29px;

	z-index: 100;

}



.art-nav .l, .art-nav .r

{

	position: absolute;

	z-index: -1;

	top: 0;

	height: 29px;

	background-image: url('images/nav.png');

}



.art-nav .l

{

	left: 0;

	right:3px;

}



.art-nav .r

{

	right: 0;

	width: 960px;

	clip: rect(auto, auto, auto, 957px);

}





/* end Menu */



/* begin MenuItem */

.art-menu ul li

{

	clear: both;

}



.art-menu a

{

	position:relative;

	display: block;

	overflow:hidden;

	height: 23px;

	cursor: pointer;

	text-decoration: none;

	margin-right: 4px;

	margin-left: 4px;

}





.art-menu a .r, .art-menu a .l

{

	position:absolute;

	display: block;

	top:0;

	z-index:-1;

	height: 69px;

	background-image: url('images/MenuItem.png');

}



.art-menu a .l

{

	left:0;

	right:3px;

}



.art-menu a .r

{

	width:406px;

	right:0;

	clip: rect(auto, auto, auto, 403px);

}



.art-menu a .t 

{

	font-family: Arial, Helvetica, Sans-Serif;

	font-size: 12px;

	font-style: normal;

	font-weight: bold;

	text-transform: uppercase;

	color: #D2D0D1;

	padding: 0 10px;

	margin: 0 3px;

	line-height: 23px;

	text-align: center;

}



.art-menu a:hover .l, .art-menu a:hover .r

{

	top:-23px;

}



.art-menu li:hover>a .l, .art-menu li:hover>a .r

{

	top:-23px;

}



.art-menu li:hover a .l, .art-menu li:hover a .r

{

	top:-23px;

}

.art-menu a:hover .t

{

	color: #D2D0D1;

}



.art-menu li:hover a .t

{

	color: #D2D0D1;

}



.art-menu li:hover>a .t

{

	color: #D2D0D1;

}





.art-menu a.active .l, .art-menu a.active .r

{

	top: -46px;

}



.art-menu a.active .t

{

	color: #0D0C0D;

}





/* end MenuItem */



/* begin MenuSeparator */

.art-nav .art-menu-separator

{

	display: block;

	width: 1px;

	height: 23px;

	background-image: url('images/MenuSeparator.png');

}



/* end MenuSeparator */

Заранее благодарен!