CODEWITHSUNDEEP
htmlcss
UserX
UserX

Reputation: 1327

Trying to just hover menu item and not entire height of the menu and my border-bottom is not occupying entire width

Im doing a menu with submenus but Im having two issues that I dont know how to solve.

First issue is that, when I hover my menu items, I want a gray background hover my menu item, but I dont want that this background occupy entire menu height. I just want a background above my menu link.

Second issue, is that Im giving a border-bottom to my dropDownMenu li ul li, but this border does not occupy the entire width of my li ul li element. As you can see in my fiddle.

.dropDownMenu li ul li {
    width: 305px;
    border-bottom:4px solid red;
}

Here I have what I have: http://jsfiddle.net/jcak/Lmc4mj2u/3/

In this image you can see my two issues, first my gray background occupying entire menu height. And second behind "Html", "CSS" and "JS" my border-bottom is not occupying entire width.

enter image description here

This is my html:

<section id="menu-container">   
    <nav id="menu">
        <ul class="dropDownMenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Web Design</a>
                <ul>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JS</a></li>
                </ul>
            </li>
            <li><a href="#">Programming</a>
                <ul>
                    <li><a href="#">FLEX</a></li>   
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">jQuery</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</section>

And my css:

*
{
    margin:0;
    padding:0;
    border:0;
    outline:none;
}
#menu-container
{
    width:100%;
    height:62px;
    float:left;
    background:#4f4383;
    z-index:7;
    float:left;
    border-bottom: 3px solid #ccc;
}

#menu
{
    width:960px;
    height:auto;
    margin:0 auto 0 auto;
}

.dropDownMenu li ul li ul {
    list-style: none;
}


.dropDownMenu a {
    line-height: 62px;
    padding: 0 20px;
    float: left;
    font-size:17px;
    font-weight:bold;
    text-decoration: none;
    color: #ccc;
}
.dropDownMenu a:hover {
    background-color:#ccc;height:62px; color:#2F3083; line-height:62px;border-radius:7px; 
}
.dropDownMenu li {
    float: left;
    display: block;
    list-style: none;
    position: relative;
}


.dropDownMenu li ul {
    width: 200px;
    position: absolute;
    list-style: none;
    display: none;
    margin: 0;
    left: -10px;
    z-index: 999;

}
.dropDownMenu li:hover ul {
    display: block;
    margin-top: 62px;
    margin-left: 10px;

}
.dropDownMenu li ul li {
    width: 305px;
    border-bottom:4px solid red;
}
.dropDownMenu li ul li a {
    color: #ccc;
    display: block;
    margin: 0 !important;
    width: 100%;
    background: #4f4383;
    border-right:3px solid #ccc;
    border-left:3px solid #ccc;
}



.dropDownMenu li ul li ul {
    position: absolute;
    display: none !important;
    left: 240px;
    top: -30px;
    z-index: 999;
}
.dropDownMenu li ul li:hover ul {
    display: block !important;
    margin: 30px 0 0 0;
}
.dropDownMenu li ul li ul li {
    float: left;
    width: 305px;
    display: block;
}
.dropDownMenu li ul li ul li a {
    display: block;
    margin: 0 !important;
    width: 100%;
    background: #4f4383;
    border-right:3px solid #ccc;
    border-left:3px solid #ccc;
    border-right:3px solid #ccc;
    border-top:3px solid #ccc;
}

Upvotes: 1

Views: 723

Answers (1)

Taruc
Taruc

Reputation: 301

Issue 1 Make the distinction between the link/a elements and its containing li's, so the hover state of li should affect only the background color of the a element within it.

If you want the link over the entire height, you would need to add an element like span within the a element, have the a element span the entire height, and specify the hover state to change background color of that span.

Issue 2 You need box-sizing:border-box. Otherwise, the border attribute ignores the padding portion of elements.

updated fiddle: http://jsfiddle.net/taruckus/Lmc4mj2u/10/

*
{
    margin:0;
    padding:0;
    border:0;
    outline:none;
    box-sizing:border-box;
}

Upvotes: 1

Related Questions