Question

Roll over the text and the blue block below moves along the blue line. If I do it via position relative and set the blue block to top 20px, it also moves the text down.

Is there a way I can do this purely in CSS, or should I use a background image with the top half set as a transparent gif and the bottom blue?

The code I’ve tried so far is:

#menu ul {
    list-style:none;
    margin:0;
    padding:10px;
    text-align:center;
}
#menu ul li {
    display:block;
    float:left;
    list-style:none;
    margin-right: 40px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 39px;
}
#menu ul li a {
    display:block;
    margin:0px;
    padding:0px;
    color:#FFF;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 5px;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
#menu ul li a:hover {
    color:#fff;
    margin-bottom:5px;
    padding-bottom:5px;
}
#menu ul li a.active,
#menu ul li a.active:hover {
    color:#fff;
    background-color: #0488C5;
    font-weight:bold;
}

I am still learning so excuse any mistakes!

Answer 1

Click here for a demo.

​<ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
</ul>

ul {
    width: 100%;
    border-bottom: 3px solid blue;
    overflow: hidden;
}

li {
    float: left;  
    margin: 0 20px 0 20px;                
}

li a {
    border-bottom: 20px solid #fff;
    display: block;
}

li a:hover, .active {
    border-bottom: 20px solid blue;
}

​You can then use the hover state for another class called something like “active” that you can apply when on that page.

You should be able to tweak this example to suit your needs.

You don’t need any images. CSS is more than capable of doing this for you.