Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Ordering unordered list and list item to display box shadow on ul

Ordering unordered list and list item to display box shadow on ul

Problem

Is there anyway to get ul box Shadow to be on top of the li?

I would like the Inset shadow to wrap around the list items...but it is just showing up underneath and is not visible.



#menu ul {
    z-index: 50;
    list-style: none;
    height: 75px;
    width: 304px;
    border: 4px solid #000000;
    -moz-box-shadow:    inset 0 0 20px black;
    -webkit-box-shadow: inset 0 0 20px black;
    box-shadow:         inset 0 0 20px black;
} 

#menu li {
    z-index: -1;
    border-right: 1px dotted #000000;
    float: left;
    width: 75px;
    height: 75px;
    background-color:lightblue;
}
Problem courtesy of: Ricky Mason

Solution

Hey Ricky you can achieve your desired results through css before: after: pseudo classes

And you can set the shadow from top to bottom and left to right where do you want to place the shadow.

I hope this will help you.

CSS

#menu ul:before {
    content:'';
    height: 78px;
    left: 47px;
    position: absolute;
    right: 0;
    width: 294px;
        -webkit-box-shadow: 0 0 10px 0px #000000 inset;
   -moz-box-shadow: i0 0 10px 0px #000000 inset;
    box-shadow: 0 0 10px 0px #000000 inset}
  } 

#menu ul {
    margin:0;
    padding:0;
    height: 75px;
    border:1px solid black;
    background:red;
    position:relative;
  }  



#menu li {
    background-color: lightblue;
    border: 1px solid green;
    float: left;
    height: 75px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 71px;

}

HTML


you can see the demo :- http://jsbin.com/avupaw/15/edit

Solution courtesy of: Shailender Arora

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Ordering unordered list and list item to display box shadow on ul

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×