CODEWITHSUNDEEP
css
froadie
froadie

Reputation: 82993

Why is my box shadow getting left behind?

I'm trying to take some CSS code written by a previous dev to create a horizontal drop-down menu and factor it out into a reusable horizontalMenu.css file. I coded 2 options - the default menu that displays a simple white menu with a box-shadow, and a more significant "blue" menu. This is what the css code looks like:

.horizontalMenu { 
    background-color:  white;
    display: inline-block;
}

.horizontalMenu.blue{
    background-color:  #2F5E92;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 2px 5px;
    display: block;
}

.horizontalMenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    text-align: left;
    box-shadow: 0 6px 10px -1px #888888;
    behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu.blue ul{
    box-shadow: 0 5px 25px 5px #888888;
}

.horizontalMenu ul li {
    display:inline-block;
    background-color: white; 
    white-space: nowrap;
}

.horizontalMenu.blue ul li{
    background-color: #2F5E92;
}

.horizontalMenu a {
    display:block;
    padding:0 15px 0 15px;  
    color:black;
    font-size:16px;
    line-height: 45px;
    text-decoration:none;
    cursor:pointer;
}

.horizontalMenu.blue a{
    color:#FFF;
}

.horizontalMenu a:hover{ 
    background-color:  #0A6FDE;
}

.horizontalMenu a.active{
    background-color: #6789AE;
}

/* Hide Dropdowns by Default */
.horizontalMenu ul ul {
    display: none;
    position: absolute; 
    top: 45px;
    z-index: 1;
}

/* Display Dropdowns on Hover */
.horizontalMenu ul li:hover > ul {
    display:block;
}

/* First Tier Dropdown */
.horizontalMenu ul ul li {
    float:none;
    display:list-item;
    position: relative;
}

/* Second, Third and more Tiers */
.horizontalMenu ul ul ul li {
    position: relative;
    top:-45px; 
    left:170px;
}

And my simple test menu:

<div class='horizontalMenu'>
    <ul>
        <li><a>Website Config &#9662;</a>
            <ul>
                <li><a>Include Files</a></li>
            </ul>
        </li>
        <li><a>User Training &#9662;</a>
            <ul>
                <li><a>Upload new webinar &#9656;</a>
                    <ul>
                      <li><a>Training webinar</a></li>
                      <li><a>Some other webinar</a></li>
                    </ul>
                </li>
                <li><a>Upload new guide</a></li>
            </ul>
        </li>
        <li><a>Data</a></li>
    </ul>
 </div>

This looks great for a simple menu with a single "tier" of dropdowns. However, when I move onto the second tier (which is often necessary for our site's menus), while the second tier menu renders correctly, the box-shadow seems to get left behind. Screenshots:

enter image description here enter image description here

And here's a jsfiddle.

How can I fix this?

Upvotes: 1

Views: 77

Answers (1)

miguel-svq
miguel-svq

Reputation: 2176

It's the ul shadow, wich contains "Upload new webinar" and the options "Training webinar" and "some other webinar". Add a border if you want to see it clear (cascading menus are often confusing, I use to wrap all ul with "1px dotted red - or, green,blue etc--" to see those things easily while developing).

https://jsfiddle.net/f1jtxktL/4/

Instead of "placing" the 3rd level li you could place the ul. e.g: 

.horizontalMenu ul ul ul li {
position: relative;
top:-45px; 
left:170px;
}
--vs--
.horizontalMenu ul ul ul{
 position: absolute;
 left:100%;top:0;
}

https://jsfiddle.net/f1jtxktL/9/

EDIT: ah!! I forgot the answer itself: "The box shadow is not left behing, the whole box is left behind and the shadow stay with it."

Upvotes: 2

Related Questions