Css list disappearing when mouse hovers over other objects

Question

I'm currently stuck on problem with my list, it disappears when mouse hovers over other objects like that (used dev console to highlight borders):https://i.stack.imgur.com/fOwld.gif

I could just increase margin-top but it would look unaesthetically.

My question is how can I make it not disappear when mouse hovers over other objects, I actually accomplished it on my other website but I checked code and I have no idea why on this one it works:https://i.stack.imgur.com/ksfUd.gif Here is the navigation css code:

.nav
{ 
width: 100%;
padding: 10px 0;
background-color: #ffffff;
text-align: center;
white-space: nowrap;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
}
ol a
{
text-decoration: none;
color:#50394c;
display: block;
}
ol >li
{
float: left;
padding-left:45px;
padding-right:45px;
opacity: 0.8;
}
ol >li:hover
{
opacity: 1;
}
ol >li >ul
{
display: none;
list-style-type: none;
background-color:#ffffff;
}
ol >li:hover >ul
{
display:block;
padding-left:0px;
padding-top:14px;

}
ol > li > ul > li
{
border-top: 1px dashed #b97070;
text-align:center;
opacity: 0.8;
}
ol > li > ul > li:hover
{
opacity: 1;
}

Here is the headline and img css code:

.pillowheadline
{
width:700px;
display: inline-block;
position: relative;
bottom: 40px;
}
.pillowimg1
{
width:500px;
height:300px;
display: inline-block;
margin-top:120px;
}

html:

<header>

        <h1 class="logo">PRZYKŁADOWY TEKST</h1>

        <nav id="topnav">

            <div class="nav">
                <ol>
                    <li><a href="#">Front page</a></li>
                    <li><a href="#">Recommended Products</a>
                        <ul>
                            <li><a href="#">Pillows</a></li>
                            <li><a     href="#">Honey</a></li>                  
                            <li><a href="#">przykład3</a></li>                  
                        </ul>
                    </li>
                    <li><a href="#">Natural Products</a>
                        <ul>
                            <li><a href="#">Cereals</a></li>
                            <li><a href="#">Wicker</a></li>                 
                            <li><a href="#">Fruits</a></li>                 
                            <li><a href="#">Dairy</a></li>                  
                            <li><a href="#">Herbs</a></li>                  
                        </ul>
                    <li><a href="#">Contact</a></li>
                </ol>
            </div>
        </nav>

    </header>

@amitwadhwani No, we don't want that when we, Stackoverflow, have our own Stack snippet tool — Asons, Aug 26 '17 at 14:24
@LGSon i m sorry i dindt get what ur trying to say? i am new to stach pls explain in detail about this tool — amit wadhwani, Aug 26 '17 at 14:26
@amitwadhwani Read this: https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ — Asons, Aug 26 '17 at 14:28
@YoungKyunJin I added z-index:-1; to .pillowimg1, .pillowheadline and z-index:1; to ol > li > ul > li and it's working now, please post answer so I can verify it :) — wessx, Aug 26 '17 at 14:34

score 0 · Accepted Answer · answered Aug 26 '17 at 14:39

0

.pillowimg1{
  z-index: -1;
}
.pillowheadline{
  z-index: 1;
}

ol > li > ul > li{
  z-index: 1;
}

I think it is a problem with z-index

answered Aug 26 '17 at 14:39

kyun

9,710
9
31
66

also z-index only works on positioned elements so I needed to add position:relative; to .pillowimg1 and .pillowheadline but it's a standart so I don't know if you should include that in your answer, anyway thanks. – wessx Aug 26 '17 at 14:45
@BernardCzostek It's my pleasure. – kyun Aug 26 '17 at 14:45

Css list disappearing when mouse hovers over other objects

1 Answers1