안녕하세요 CI 를 이용하여 홈페이지 제작에 몰두중인 초보 개발자 입니다.

글 쓴 것은 다름이아니오라, 완성된 홈페이지 레이아웃을 다시 정리하기 위해

cssmenumarker 라는 사이트 에서 menu bar 소스를 받아서 기존 홈페이지에 적용 중인데요.

그곳에 반나절을 매달려도 풀리지 않는 의문점이 있어서 저녁 늦게 질문글을 올리게 되었습니다.


[질문]

1. 링크
http://cssmenumaker.com/builder/2163371

로 들어가보면,  Home, Product, About, Content 가 있습니다.

2. 질문내용
소스를 받아 홈페이지에 적용한 후, 네비게이션 바 왼편과 오른편에,
'마우스 오버해도 파란색으로 변하지 않는 링크 텍스트' 와 '버튼' 을 삽입하고 싶은데. 태그 안에 들어가버리면, 텍스트가 사라져버립니다.

현재 메뉴바의 모습과 제가 원하는 결과물의 구조는 이렇습니다

3. 현재


4. 원하는 결과물



와 같이, 네비게이션 왼편과 오른편에, 마우스오버 ( 마우스가 메뉴 위에 올라가는 행위 ) 해도 색상이 변하지 않는 영역에 해당되는 링크나, 버튼이나, 텍스트를 넣고 싶은데

넣으려고 시도를 하면 메뉴바에 가려져 보이지 않게 되어 너무 답답합니다..
z-index 때문인가 해서 사투를 벌여도 답이 안보오는게 답답하기만 합니다.


5. 시도 
맨 앞쪽의 '리뉴얼된홈페이지로이동하려면이곳을클릭' 쪽을 div 태그로 삽입해버리면


 

와 같이 마우스오버 시에 메뉴의 버튼처럼 백그라운드 색상이 표시가 되어버립니다.
메뉴들과는 별개인 link text 를 걸고 싶은데 말이지요..

또한 메뉴바와는 별개인 오브젝트를 추가하면 메뉴바가 그것을 덮어버립니다.
(버튼이미지, 텍스트, div, span 기타 등등..)

제가 궁금한 것은 여기까지이고, 요약을 하자면 저 위에 menu bar 양쪽에 태그로 쌓여진 메뉴들과는 별개로 텍스트와 버튼이나 이미지를 넣으려 함에어떤 처리를 해주어야 하는지 궁금합니다

 

소스는 http://cssmenumaker.com/builder/2163371 로 가시면 보이시지만
혹시몰라  텍스트파일에 저장하여 파일 첨부 하겠습니다.

긴 글 읽어주셔서 감사합니다.