드롭 다운 메뉴의 공간

저는 CSS 초보자입니다. 나는 메뉴와 드롭 다운 메뉴 사이에 나타나는 작은 공간이있어 호버 효과가 깨지는 메뉴를 만들었습니다. 제발 도와주세요. !드롭 다운 메뉴의 공간

ul#menu {margin-top:-5px !important;}

중요한 태그 #menu UL에 대한 다른 여백 설정을 통해 존재를 취합니다 감사합니다

여기

#menu, #menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#menu { 
    width: 958px; 
    /*margin: 60px auto;*/ 
    border: 1px solid #222; 
    background-color: #111; 
    background-image: linear-gradient(#444, #111); 

    box-shadow: 0 1px 1px #777; 
} 
#menu:before, 
#menu:after { 
    content: ""; 
    display: table; 
} 

#menu:after { 
    clear: both; 
} 

#menu { 
    zoom:1; 
} 
#menu li { 
    float: left; 
    /* border-right: 1px solid #222;*/ 
    box-shadow: 1px 0 0 #444; 
    position: relative; 
    box-sizing: border-box; 
    width: 20%; 
} 

#menu a { 
    float: left; 
     padding: 11px 64px; 
    color: #999; 
    text-transform: uppercase; 

    text-decoration: none; 
    text-shadow: 0 1px 0 #000; 
} 

#menu li:hover > a { 
    color: #fafafa; 
} 

*html #menu li a:hover { /* IE6 only */ 
    color: #fafafa; 
} 
#menu ul { 
    margin: 20px 0 0 0; 
    _margin: 0; /*IE6 only*/ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 38px; 
    left: 0; 
    z-index: 1000000;  
    background: #444;  
    background: linear-gradient(#444, #111); 
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);  

    transition: all .2s ease-in-out; 
    width: 100%; 
} 

#menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 

#menu ul ul { 
    top: 0; 
    left: 150px; 
    margin: 0 0 0 20px; 
    width:100%; 


    _margin: 0; /*IE6 only*/ 
    box-shadow: -1px 0 0 rgba(255,255,255,.3);   
} 

#menu ul li { 
    float: none; 
    display: block; 
    border: 0; 
    _line-height: 0; /*IE6 only*/ 
    box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
} 

#menu ul li:last-child { 
    box-shadow: none;  
} 

#menu ul a {  
    padding: 10px; 
    width: 130px; 
    _height: 10px; /*IE6 only*/ 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
} 

#menu ul a:hover { 
    background-color: #111; 
} 
#menu ul li:first-child > a { 
    /*border-radius: 3px 3px 0 0;*/ 

} 

#menu ul li:first-child > a:after { 
    content: ''; 
    position: absolute; 
    left: 40px; 
    top: -6px; 
} 

#menu ul ul li:first-child a:after { 
    left: -6px; 
    top: 50%; 
    margin-top: -6px; 
    border-left: 0;  
} 

#menu ul li:first-child a:hover:after { 
} 

#menu ul ul li:first-child a:hover:after { 
    border-right-color: #000; 
    border-bottom-color: transparent; 

} 

#menu ul li:last-child > a { 
    /*border-radius: 0 0 3px 3px*/; 
}

는

<ul id="menu"> 
    <li><a href="#">About </a></li> 
    <li><a href="#">Programmes</a><ul> 
     <li><a href="#">Undergraduate</a></li> 
     <li><a href="#">Postgraduate</a></li> 
    </ul></li> 
    <li><a href="#">Academics</a></li> 
    <li><a href="#">Research</a></li> 
    <li><a href="#">Facilities</a></li> 
</ul>

출처

2012-10-02 Fahad Uddin

여기에서 일하는 것 같습니다. http://jsfiddle.net/j08691/WdwcW/. 그것은 더 많은 CSS finessing을 사용할 수 있지만 hover 효과는 깨지지 않습니다. – j08691

예. 그것은 바이올린에서 작동하지만 웹 사이트에서 문제를 만들고있었습니다. 나는 그것을'! important'로 고정시켰다. –

추가, html로입니다. 필요에 따라 부모 메뉴 항목 바로 아래로 드롭 다운하여 조정하십시오.

또한 Chrome을 사용하는 경우 요소를 오른쪽 클릭하고 '요소 검사'를 클릭하십시오. 스타일은 라이브로 렌더링되며 CSS 파일을 편집, 저장, 업로드하지 않고도 효과를 볼 수 있습니다.

Firefox의 경우 동일한 도구에 대해 방화 광을 다운로드하십시오.

출처

2012-10-02 21:20:13 Travis

드롭 다운 메뉴의 공간

답변

관련 문제