CSS Raum zwischen Menüs und Untermenüs

Das ist, was ich versuche zu tun:CSS Raum zwischen Menüs und Untermenüs

enter image description here

Wenn Sie es bemerkt, ist der Raum zwischen dem Menü und dem Untermenü.

Das Problem ist, dass das Untermenü nicht auf diese Weise funktioniert, denn wenn der Mauszeiger das Menü verlässt, verschwindet das Untermenü.

Es funktioniert nur, wenn es so aussieht:

enter image description here

Wie kann ich den Raum zwischen dem Menü und dem Untermenü verlassen und damit es funktioniert?

Mein Code:

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; 
}

Quelle

2013-04-22 kalpetros

Hat eine dieser Antworten helfen Ihnen? Lassen Sie es uns wissen, indem Sie eine Antwort oder eine richtige Antwort geben. –

Sie könnten die Verwendung von :before machen die „hoverable“ Bereich zu erweitern:

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

See this demo.

Quelle

2013-04-22 23:38:32

+1 für die genaue Beantwortung der Frage. Ich dachte, er wollte den Rand loswerden. –

CSS Raum zwischen Menüs und Untermenüs

Antwort

Verwandte Themen