CSS/HTML 드롭 다운 탐색 - 변경 높이와 폭

Question

나는 탐색 메뉴에 대해이 CSS 코드가 있습니다

ul#css3menu_top,ul#css3menu_top ul { 
    margin:0; 
    list-style:none; 
    padding:0; 
} 
ul#css3menu_top,ul#css3menu_top .submenu { 
    background-color:#EEEEEE; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
} 
ul#css3menu_top .submenu { 
    visibility:hidden; 
    position:absolute; 
    left:0; 
    top:100%; 
    opacity:0; 
    -moz-transition:all 0.5s; 
    -webkit-transition:opacity 0.5s; 
    -o-transition:opacity 0.5s; 
    -moz-box-shadow:3.5px 3.5px 5px #000000; 
    -webkit-box-shadow:3.5px 3.5px 5px #000000; 
    box-shadow:3.5px 3.5px 5px #000000; 
    float:left; 
    background-color:#EEEEEE; 
    border-width:2px; 
    border-radius:6px; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-color:#FFF; 
    padding:0 10px 10px; 
} 
ul#css3menu_top li:hover>.submenu { 
    visibility:visible; 
    opacity:1; 
} 
ul#css3menu_top li { 
    position:relative; 
    display:block; 
    white-space:nowrap; 
    font-size:0; 
    float:left; 
} 
ul#css3menu_top li:hover { 
    z-index:1; 
} 
ul#css3menu_top ul .submenu { 
    z-index:2; 
    position:absolute; 
    left:100%; 
    top:0; 
} 
ul#css3menu_top { 
    font-size:0; 
    width:100%; 
    z-index:999; 
    position:relative; 
    display:inline-block; 
    zoom:1; 
    padding:0 0%; 
    margin:0 0%; 
    *display:inline; 
} 
ul#css3menu_top .column { 
    float:left; 
} 
* html ul#css3menu_top li a{ 
    display:inline-block; 
} 
ul#css3menu_top>li { 
    margin:0; 
    width:17%; 
} 
ul#css3menu_top li.toplast{ 
    width:15%; 
} 
ul#css3menu_top a:active, ul#css3menu_top a:focus { 
    outline-style:none; 
} 
ul#css3menu_top a{ 
    display:block; 
    vertical-align:middle; 
    text-align:left; 
    text-decoration:none; 
    font:bold 14px Calibri; 
    color:#EEEEEE; 
    text-shadow:#FFF 0 0 1px; 
    cursor:pointer; 
    padding:6px 15px 6px 3px; 
    background-color:#666666; 
    background-image:url("mainbk.png"); 
    background-repeat:repeat; 
    background-position:0 0; 
    border-width:0 0 0 1px; 
    border-style:solid; 
    border-color:#c0c0c0; 
} 
ul#css3menu_top ul li { 
    float:none; 
    margin:10px 0 0; 
} 
ul#css3menu_top ul a { 
    text-align:left; 
    padding:4px; 
    background-color:#EEEEEE; 
    background-image:none; 
    border-width:0; 
    border-radius:0px; 
    -moz-border-radius:0px; 
    -webkit-border-radius:0px; 
    font:14px Calibri; 
    color:#666666; 
    text-decoration:none; 
} 
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed { 
    background-color:#EEEEEE; 
    color:#666666; 
    background-position:0 100px; 
    text-decoration:none; 
} 
ul#css3menu_top img { 
    border:none; 
    vertical-align:middle; 
    margin-right:6px; 
} 
ul#css3menu_top span { 
    display:block; 
    overflow:visible; 
    background-position:right center; 
    background-repeat:no-repeat; 
    padding-right:0px; 
} 
ul#css3menu_top ul span { 
    padding-right:8px; 
} 
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed { 
    background-color:#EEEEEE; 
    background-image:none; 
    color:#666666; 
    text-decoration:none; 
} 
ul#css3menu_top li.topfirst>a { 
    padding-left: 7px; 
    border-width:0; 
    border-radius:4px 0 0 4px; 
    -moz-border-radius:4px 0 0 4px; 
    -webkit-border-radius:4px; 
    -webkit-border-top-right-radius:0; 
    -webkit-border-bottom-right-radius:0; 
} 
ul#css3menu_top li.toplast>a { 
    padding-right: 7px; 
    border-radius:0 4px 4px 0; 
    -moz-border-radius:0 4px 4px 0; 
    -webkit-border-radius:0; 
    -webkit-border-top-right-radius:4px; 
    -webkit-border-bottom-right-radius:4px; 
} 

@media only screen and (max-width:900px),only screen and (max-device-width:900px){ 
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}} 
@media only screen and (max-width:600px),only screen and (max-device-width:600px){ 
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}} 
@media only screen and (max-width:450px),only screen and (max-device-width:450px){ 
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}} 


/*opera hack*/ 
@media only screen and (min-width:900px){ 
     html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{ 
      display:table; 
     } 
     html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{ 
      width:auto; 
      float:none; 
      display:table-cell; 
     } 
     html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{ 
      width:auto; 
      display:table-cell; 
     } 

} 

내가 필요로하는 방법 즉, 메인 링크의 높이와 너비를 변경하는 방법을 해결하기를 : http://jsfiddle.net/EZh85/

어떤 아이디어 내가 할 수있는 일 : DEMO/다운로드/연락처 링크

여기

는 바이올린입니까?

EDIT : 마우스를 올리면 열리는 하위 메뉴가 맨 위에 여백을 갖도록 변경하여 주 메뉴 위에 표시되지 않는 방법은 무엇입니까?

Answer 1

인라인 스타일을

JS Fiddle

사이드 참고를 수정하여 높이를 변경할 수 있도록 다른 2 개 탭을 위해, 당신은 인라인 스타일을 사용하고, ul#css3menu_top a에 height: 24px; 추가 : 스타일을 재 작성, 그것의 엉망

Answer 2

타겟팅 할하려는 선택기은 다음과 같습니다

,691

ul#css3menu_top>li:nth-child(n+3) { 
    width: 50%; 
} 

가 이상적으로 당신이 당신과 함께 너비/높이 충돌 모든 인라인 스타일과 규칙을 제거해야합니다 :

/* For width */ 
ul#css3menu_top .topmenu 
ul#css3menu_top .toplast 
/* For height */ 
ul#css3menu_top a 

불행하게도 일반적으로 그 스타일을 시도 할 때 문제가 발생할 이와 같은 인라인 스타일과 정말 특정 스타일이있다

jsFiddle

ul#css3menu_top .topmenu, 
ul#css3menu_top .toplast { 
    width:100px; 
} 
ul#css3menu_top a{ 
    height: 50px; 
    line-height: 50px; 
} 

난 그냥 그렇게 !important 추가 : 이러한 스타일을 포함 y가 재정의되었지만 이것은 나쁜 습관이며 CSS를 더 깔끔하게하려면 인라인 스타일과 다른 규칙을 제거해야합니다.

ul#css3menu_top .topmenu, 
ul#css3menu_top .toplast { 
    width:100px!important; 
} 
ul#css3menu_top a{ 
    height: 50px!important; 
    line-height: 50px!important; 
}