CSS Przestrzeń pomiędzy menu i podmenu

To właśnie staram się robić:CSS Przestrzeń pomiędzy menu i podmenu

enter image description here

Jeśli zauważyłeś istnieje przestrzeń pomiędzy menu i podmenu.

Problem polega na tym, że podmenu nie działa w ten sposób, ponieważ gdy kursor myszy opuszcza menu, podmenu znika.

To działa tylko wtedy, gdy wygląda następująco:

enter image description here

Jak mogę zostawić przestrzeń pomiędzy menu i podmenu i zmusić go do pracy?

mój kod:

JSFIDDLE CODE

HTML:

<body> 
<nav> 
    <ul> 
     <li><a href="#">One</a> 
      <ul> 
       <li><a href="1.html">1.1</a></li> 
       <li><a href="2.html">1.2</a> 
      </ul> 
     </li> 
     <li><a href="#">Two</a> 
      <ul> 
       <li><a href="3.html">2.1</a></li> 
       <li><a href="4.html">2.2</a></li> 
       <li><a href="5.html">2.3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Three</a> 
      <ul> 
       <li><a href="6.html">3.1</a></li> 
       <li><a href="7.html">3.2</a></li> 
      </ul> 
     </li> 
     <li><a href="8.html">Four</a></li> 
    </ul> 
</nav> 
</body>

CSS:

body { 
    background-color: #cac3bc 
} 
nav { 
    float: left; 
} 
nav ul ul { 
    display: none; 
} 
nav ul li:hover > ul { 
    display: block; 
} 
nav ul { 
    background-color: #fff; 
    margin-top: 10px; 
    padding: 0 20px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
    margin-right: -80px; 
} 
nav ul li { 
    float: left; 
} 
nav ul li:hover { 
    border-bottom: 5px solid #f5aa65; 
    color: #fff; 
} 
nav ul li a:hover { 
    color: #000; 
} 

nav ul li a { 
    display: block; 
    padding: 15px 15px; 
    font-family: 'PT Sans', sans-serif; 
    color: #000; 
    text-decoration: none; 
} 
nav ul ul { 
    background-color:#fff; 
    border-radius: 0px; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
} 
nav ul ul li { 
    float: none; 
    position: relative; 
} 
nav ul ul li a { 
    padding: 15px 40px; 
    color: #000; 
}

Źródło

2013-04-22 kalpetros

Czy któryś z tych odpowiedzi pomóc? Daj nam znać na podstawie upvote lub poprawnej odpowiedzi. –

Można skorzystać z :before przedłużyć „hoverable” Powierzchnia:

nav ul ul:before { 
    content: ""; 
    display: block; 
    height: 20px; 
    position: absolute; 
    top: -20px; 
    width: 100%; 
}

See this demo.

Źródło

2013-04-22 23:38:32

+1 za odpowiedź na pytanie dokładnie. Myślałem, że chce pozbyć się marginesu. –

CSS Przestrzeń pomiędzy menu i podmenu

Odpowiedz

Powiązane problemy