Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Is this possible? › Reply To: [Solved] Is this possible?

December 2, 2013 at 12:27 pm #157618
ata8
Participant

Ok here is the situation that i stuck in.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<style>
    *{
    margin: 0;
    padding: 0;
    }

body{
    background-color: #F75252;
    background-image: -webkit-linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px), -webkit-linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px), -webkit-linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px), -webkit-linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-image: -moz-linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px), -moz-linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px), -moz-linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px), -moz-linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-image: -o-linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px), -o-linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px), -o-linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px), -o-linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-image: -ms-linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px), -ms-linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px), -ms-linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px), -ms-linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-image:   linear-gradient(#f97c7c 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, #f97c7c 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(#f86262 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, #f86262 1px, rgba(0, 0, 0, 0) 1px);
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    -webkit-background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;
    -moz-background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;
    background-size: 60px 60px, 60px 60px, 15px 15px, 15px 15px;
}


header{
    width: 100%;
    height:60px;
    background-color: #222;
}


#menubar{
    width: 1200px;
    margin:auto;
}

ul,li{
    list-style: none;
    text-align: left;
}

ul li{
    display: inline-block;
    zoom: 1;
    *display: inline;
    margin: 0 10px;
}


li a{
    text-decoration: none;
    display: block;
    font-family: Arial;
    color: #fff;
    line-height: 60px;
}

li a:hover,
li.active a{
    background-color: transparent;
}


</style>

</head>
<body>

<header>
    <nav id="menubar">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact us</a></li>
            <li><a href="">About us</a></li>
        </ul>
    </nav>
</header>

</body>
</html>

I want “active” class and “hover” state has no black background and show the “body” background.