CODEWITHSUNDEEP
cssmenuborder
TheG1
TheG1

Reputation: 11

Drop down menu borders

I'm attempting to create a simple drop down menu for. What I have currently looks like the following: http://jsfiddle.net/Wt9UC/

Now, what I'm aiming to achieve is something more in the lines of what Fiverr has, see for reference.

enter image description here

To clarify, I'm attempting to get borders (top, left, right) around the menu item hovered and around the entire box of sub-items which appears on-hover. If I'm being unclear in my wording the following image might help.

enter image description here

I tried playing around with layers (e.g. bringing the sub-items to the front in hopes of the border line being covered) but it didn't work out very well.

My HTML: 

<ul id="menu">
    <li><a href="#">Test</a>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </li>
</ul>

My CSS:

#menu a {
    color: black;
}

#menu {
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 30px;
}

#menu li {
    float: left;
}

#menu li a {
    padding: 9px 20px;
    display: block;
    text-decoration: none;
    font-size: 12px;
}

#menu a:hover {
    color: #c5cbc9;
    border-radius: 3px;
    border-left: 1px solid;
    border-top: 1px solid;
    border-right: 1px solid;
}

/* Submenu */
#menu ul {
    border-radius: 3px;
    border: 1px solid;
    position: absolute;
    left: -9999px;
    top: -9999px;
    list-style-type: none;
}

#menu li:hover { /*had bg*/
    position: relative;
}

#menu li:hover ul { /*had bg*/
    left: 0px;
    top: 30px;
    padding: 0px;
}

#menu li:hover ul li a {
    padding: 5px;
    display: block;
    width: 168px;
    text-indent: 15px; /*had bg*/
}

#menu li:hover ul li a:hover {
    text-decoration: underline;
}

Thanks for your time!

Upvotes: 0

Views: 4866

Answers (2)

Toni Andrić
Toni Andrić

Reputation: 38

u need to do the following:

Add a "border-bottom: 1px solid #FFF" to your "#menu li a {}" and then move your dropdown 1px up.

link to fiddle http://jsfiddle.net/cL2x7/

Upvotes: 0

Swapna
Swapna

Reputation: 843

Here is a Complete tutorial for building a Mega Menu. Hope this helps.

http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

Demo Link : http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html

Hover on "4 column"/ Thats your exact requirment/

Upvotes: 1

Related Questions