CODEWITHSUNDEEP
htmlcss
kalpetros
kalpetros

Reputation: 983

CSS Space between menu and submenu

This is what I'm trying to do:

enter image description here

If you noticed there is space between the menu and the submenu.

The problem is that the submenu doesn't work this way, because when the mouse pointer leaves the menu the submenu disappears.

It only works if it looks like this:

enter image description here

How can I leave the space between the menu and the submenu and get it to work?

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

Upvotes: 12

Views: 8800

Answers (2)

john blair
john blair

Reputation: 536

The accepted answer is beautifully simple and perfect. However, I want to add an alternative for others like myself who had to use a variation of the answer above. In my situation my sub menu is full width so to do that I do an absolute position on my sub menu to start just below the main menu - I introduce the :before element to bring in a gap of 100px. Therefore my :before code is

// Define the 100px gap between menu and submenu.
        &:hover ul.sub-menu:before {
            content: "";
            display: block;
            //Note: This height starts at the top:100% of the position absolute for the ul.sub-menu below, 
            //pushing the sub-menu down by the height defined here.
            height: 100px;
            width: 100%;
            background-color: transparent;
        }

The code to place the sub-menu at an absolute position below the main menu and full width is 

   &:hover ul.sub-menu {
            background-color: transparent;
            display: block;
            position: absolute;
            border-top: 10px solid red;
            top: 100%;
            left: 0;
            width: 100%;
            // Sub-menu appears on top of main menu.
            z-index: 1;
enter code here

Upvotes: 0

Linus Caldwell
Linus Caldwell

Reputation: 11058

You could make use of :before to extend the "hoverable" area:

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

See this demo.

Upvotes: 30

Related Questions