고라니님의 xe_official 메뉴 수정버전 디비기2 (작성중)

이제 css 파일을 살펴보겠습니다.



line41
#dhtmlgoodies_menu{    /* Menu object */
visibility:hidden;
}
visibility:hidden; 이라고 되어있는 부분을 지워줍니다.
1차 메뉴의 스타일시트 코드가 보이지 않게 됩니다.
아예 display:none;이라고 하면 메뉴 자체가 표시 되지 않습니다.

line45
#dhtmlgoodies_menu { position:relative; top:83px; height:38px;background:#424242;}
background:#424242; 를 추가합니다. 위에서 visibility:hidden;을 지워주지 않으면 이 배경색을 지정해줘도
보이지 않게 됩니다.
자, 이렇게 하면 1차 메뉴의 높이가 좀 너무 많이 차지하는 것 같다고 생각되실 겁니다.
그럼 적절히 조절을 해주세요. 저는 폰트의 크기에 맞게 height:25px; 정도로 해주었습니다.







line95
    #dhtmlgoodies_menu a{
        color:#E8E8E8;
        text-decoration:none;
        padding-left:8px;
        padding-right:8px;
        font-family:verdana;
        font-size:.75em;
    }
1차 메뉴의 글자 색깔은 이 곳에서 지정합니다. color:#E8E8E8; 으로 변경합니다.
이 곳에서 글자의 색깔, 글자의 크기, 글자의 종류 등을 지정할 수 있습니다.
        font-family:verdana;
        font-size:.75em;
를 개인적으로 추가해봤습니다.
주의할 것은 이 곳에서 글자 크기 등의 스타일시트 코드는 하위에도 영향을 미치니
하위 메뉴의 스타일은 다시 지정해주어야합니다.




line132
/* 2차 메뉴 */
    /* Sub menu depth 1 */
    #dhtmlgoodies_menu .currentDepth2{

        padding-right:2px;
        border:1px solid #FFF;
        float:left;

    }
    /* 2차 메뉴의 폰트 스타일 */
    #dhtmlgoodies_menu .currentDepth2 a {
        color:#424242;
        border:1px solid #FFF;
        float:left;
        font-size:1em;
    }

/* 2차 메뉴의 폰트 스타일 */
부분을 추가해줍니다. 위의 클래스와는 달리 'a' 가 추가된 것을 알 수 있습니다.
이는 레이어에 <a href=..> 태그가 붙어있기 때문에 링크된 곳의 폰트 스타일을 이렇게 지정해줄 수가 있습니다.
위와 마찬가지로 이 곳에서 2차 메뉴의 글꼴크기,색깔 등의 폰트 스타일을 지정해줄 수가 있습니다.

이 곳에서 폰트 크기를 지정했다면 마우스를 올렸을 때의 폰트 크기 또한 지정해주어야합니다.

line158
#dhtmlgoodies_menu .currentDepth2over a{    /* Text rules */
        color:#000;font-size:1em;
}
위와 동일하게 지정해주는게 보기 편하겠죠. ^^