[그누보드 사용시 CSS 배경 이미지가 적용이 안되요. 아시는분 답변부탁드립니다.]

CSS 로 네비게이션 메뉴를 만들었습니다.

CSS 속성이 일반 html 페이지에서는 잘되는데 그누보드가 들어간 페이지에서는 배경이미지만 작동하지 않습니다.

뭔가 경로가 잘못된거같은데 배경이미지를 상대, 절대경로로 설정해도 그루보드 들어간 페이지에서는 나오지 않더라고요.

원래 html 하위에 css폴더 하위에 images 폴더 안에 1.png, 2.png 등이 들어있었습니다만,

배경 이미지 경로를 html 기준이 아닌 CSS 기준으로 하라고 하기에 쉽게 가려고

현재 html 하위에 css폴더 하위에 이미지 1.png, 2.png 등을 옮긴상태입니다.

#cssmenu {
  background:url(1.png);

이 속성을 background:url(../css/1.png); 이렇게 해도 역시 그루보드를 사용한 페이지에서는 배경이미지가 안나오고,

background:url(http://www.사이트주소/css/1.png); 이렇게 해도 역시 안나오고,

background:url(/1.png); 이렇게 해도 역시 안나옵니다.

그래서 소스코드에서 class 안에 CSS 속성을 소스코드에 넣었더니 나오긴하는데

문제는 마우스 오버시, 이미지를 변경할수가 없더라고요. 

<div  id='cssmenu' style="background-image:url(../css/2.png)">

<li class='active has-sub' style="background-image:url(../css/1.png)">

이걸 직접다 넣기도 그렇고 간편하자고 CSS 쓰는건데 소스코드안에 style 값을 일일이 다 주면 매리트가 있나요;

참고로 그누3쓰고있고 4로 업데이트 하려고 테스트중입니다.

[다음은 CSS 속성입니다.]

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
 margin: 0 auto;
 padding: 0;
 position: relative;
 visibility: visible;
}
#cssmenu {
  background:url(1.png) repeat;
  text-align:center;
  height: auto;
  border-bottom: 1px solid #000;
  min-width: 840px;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 -1px 0 #000;
  text-shadow: 0 -1px 0 rgba(116, 37, 2, 0.7);

}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  color: white;
  font-size: 15px;
  line-height: 50px;
  border-bottom: 1px solid #000;
  padding: 0 21px;
  text-decoration: none;
}
#cssmenu ul {
  float: center;
  list-style: none;
}
#cssmenu > ul {
  float: center;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li > a {
  color: #fff;
  font-size: 12px;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
  margin-left: -10px;
  color: #000;
}
#cssmenu > ul > li:first-child > a {

}
#cssmenu > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  margin-left: -10px;
}
#cssmenu > ul > li.active > a {
  background: url(2.png) repeat;
  color: white;
}
#cssmenu > ul > li:hover > a {
  background: url(hover.png) repeat;
  color: white;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 120px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
  color: #000;
}
#cssmenu .has-sub ul li a {
  background: url(hover.png) repeat;
  border-bottom: 1px dotted white;
  filter: none;
  font-size: 12px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
#cssmenu .has-sub ul li:hover a {
  background: url(2.png) repeat;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: url(2.png) repeat;
  border-bottom: 1px dotted #000;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: url(4.png) repeat;
}
#cssmenu .right {
  float: right;
}
#cssmenu .right a {
  background: url(hover.png) repeat;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  color: #fff;
  font-size: 11px;
  border-bottom: 1px solid #000;
  padding: 0 10px;
  text-decoration: none;
}

[다음은 소스코드입니다.]

<div id='cssmenu' >
          <ul>
            <li class='active has-sub'><a href='사이트주소'><span>메뉴01</span></a>
              <ul>
                <li><a href='사이트주소'><span>서브메뉴01</span></a></li>
                <li><a href='http://indora.co.kr/sub01_3.htm'><span>서브메뉴02</span></a></li>
              </ul>
            </li>
            <li class='has-sub' ><span>메뉴02</span></a>
              <ul>
                <li><a href='사이트주소'><span>서브메뉴01</span></a></li>
                <li><a href='http://indora.co.kr/sub01_3.htm'><span>서브메뉴02</span></a></li>
              </ul>
            </li>
</ul>
</div>