HTML/CSS menu hover links

Question

I have problem with my menu hover links. I have a menu HTML:

  <div class="menu">
            <ul id="nav">
                <li><div><a href="#">HOME</a> <div class="hover"></div></div></li>
                <li><div><a href="#">ABOUT</a><div class="hover"></div></div></li>
                <li><div><a href="#">PORTFOLIO</a><div class="hover"></div></div></li>
                <li><div><a href="#">SERVICE</a><div class="hover"></div></div></li>
                <li><div><a href="#">BLOG</a><div class="hover"></div></div></li>
                <li><div><a href="#">CONTACT</a><div class="hover"></div></div></li>
            </ul>
        </div>

CSS:

.menu {
    width: 950px;
    height: 50px;
    float: right;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    margin-top: 80px;
    border: 1px #FFF solid;
}

.menu #nav {
    list-style: none;   
}

.menu #nav li {
    display: inline-block;
    padding: 0px 30px 0px 30px;
}

.menu #nav li a {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
}

.menu #nav li a:hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    color: #ca6666;
}

.menu #nav li a .hover {
    display:none;
}


.menu li a:hover + .hover {
    background-image:url(images/hover.png);
    background-position:center;
    width: 96px;
    height: 33px;
    color: #ca6666;
    font-weight: bold;  
    display: block;
    margin-top: -20px;
}

.clear {
    clear: both;
}

and I want to make my links independent from others. For example now, when I hover over links my menu expands and it's not looking great. I want to make my hover links independent from others when I hover my menu not expands. How can I do that?

Solution 1

You should try to position the .hover element absolutely, so that it is taken out of the document flow and therefore will not affect the size of the links:

That, of course, means you have to make the parent relatively positioned, i.e. position: relative.

[Edit]: You will initiate an infinite hover loop in the browser when the :hover event is triggered on the link, because the <div class="hover"> element is not a children of the <a> element, therefore it flickers on and off.

I would suggest that you make the <div class="hover"> element a child of the link, i.e, instead of:

<li><div><a href="#">HOME</a> <div class="hover"></div></div></li>

Use:

<li><div><a href="#">HOME<div class="hover"></div></a></div></li>

And then for the :hover event, use the direct descedent selector >. Here is the minimal CSS that will solve your issue (you can view everything in the Fiddle link I posted below).

.menu #nav li > div {
    position: relative;
}
.menu #nav li a > .hover {
    display: none;
}
.menu #nav li a:hover > .hover {
    background: #333;
    background-position:center;
    width: 96px;
    height: 33px;
    color: #ca6666;
    font-weight: bold;
    display: block;
    top: -20px;
    position: absolute;
}

Do check out the proof-of-concept fiddle here - http://jsfiddle.net/teddyrised/e92Dj/

Solution 2

I made .hover use absolute positioning and then gave .menu #nav li (its parent) relative positioning and then positioned .hover accordingly. If this hover menu is intended for user interaction (a sub menu?) you will need to use .menu #nav li for your hover effect, not a because currently only the small text area is used as the hover area, not the whole li.

jsFiddle

(Blog is hidden behind the hover effect in the picture)

I made these changes:

.menu #nav li {   
    position:relative;
}
.menu li a:hover + .hover {
    position:absolute;
    left:100%;
    background-color:#F00;
    z-index:1;
}

Update

Since you wanted the hover effect near the link, I shuffled the page around a little and here it is. Note that .hover is now inside your anchor as we want to position it relative to it's location.

jsFiddle

HTML

<li>
    <div>
        <a href="#">
            HOME
            <div class="hover"></div>
        </a> 
    </div>
</li>

CSS

.menu #nav li a { position:relative; } .hover { display:none; } a:hover .hover { background-image:url(images/hover.png); background-position:center; width: 96px; height: 33px; color: #ca6666; font-weight: bold; display: block; margin-top: -20px;

position:absolute;
left:100%;
background-color:#F00;
z-index:1;

}