Home/ Questions/Q 1106223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T01:45:31+00:00

I have the following html which I want it to be viewed exactly opposite

  • 0

I have the following html which I want it to be viewed exactly opposite to what it looks like now, but I’ve tried a lot and nothing goes well, to be specific I want the A link to be on the top of the links, and the B one right under it, and the C one right under B, and so on…
I’ve tried to set the z-index to them but it hasn’t worked.
please explain to me my fault.

HTML:

<html>
<head>
    <title>Test page</title>
    <link href="style.css" type="text/css" rel="Stylesheet" media="screen" />
</head>
<body>
    <div class="d1">
        <a href="#" class="a1" style="background-color: #000;">A</a>
        <ul class="b1">
            <li>
                <a href="#" class="a2" style="background-color: #222;">B</a>
            </li>
            <li>
                <a href="#" class="a2" style="background-color: #444;">C</a>
            </li>
            <li>
                <a href="#" class="a2" style="background-color: #666;">D</a>
            </li>
            <li>
                <a href="#" class="a2" style="background-color: #888;">E</a>
            </li>
        </ul>
    </div>
</body>
</html>

CSS:

div.d1
{
    width: 100px;
    height: 160px;
    float: left;
    margin: 0 auto;
    padding: 10px 50px 15px 50px;

    background-color: Red;
}

a.a1
{
    display: block;
    width: 100px;
    height: 130px;
    float: left;

    margin: 0 auto;
    padding: 30px 0 0 0;
}
a.a1:hover
{
    color: Red;
}

ul.b1
{
    display: block;
    width: 100px;
    float: left;

    position: relative;
    left: 25px;
    top: -160px;

    list-style: none;
    margin: 0;
    padding: 0;
}
ul.b1 li
{
    display: block;
    width: 25px;
    height: 160px;
    float: left;
    z-index: -1;
}
ul.b1 li a.a2
{
    display: block;
    width: 100px;
    height: 130px;

    margin: 0 auto;
    padding: 30px 0 0 0;
}
ul.b1 li a.a2:hover
{
    color: Red;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to give the <a> positioning, because for z-index to work it requires the positioning to be set to a value other than static, easiest to do by setting it’s position to relative

    Example: http://jsfiddle.net/2JsvU/

    a {
    position: relative;
    z-index: 5;
}
    • 0