Shadow line items

I have a basic menu consisting of line items in a ul.  The items appear as colored boxes.

I'd like to put some sort of shadow under these, and wonder how that should best be done using css [preferably]?

Thanks
LVL 10
peetmAsked:
Who is Participating?
 
Tony van SchaikConnect With a Mentor Front-end Web developerCommented:
You can set it in the #navigation div for example a repeating 1 x 10px shadow with repeat-y.
You can also set it on the #navigation ul or if you want it below the li a:href you should put it on the #navigation li a
But if you only want a dropshadow below the whole menu i would do it with an extra div.
I can make an example, just give me the HTML and CSS/images of your menu. So that i can see how it looks like.

      <ul>
           <li><a href="home.htm">Home</a></li>
           <li><a href="about/about.htm">About</a></li>
           <li><a href="news/news.htm">News</a></li>
           <li><a href="photo_gallery/photo_gallery.htm">Gallery</a></li>
           <li><a href="information_links/information_links.htm">Links</a></li>
           <li><a href="faq/faq.htm">FAQ</a></li>
           <li><a href="contact/contact.htm">Contact</a></li>
           <li><a href="produce/oil_wine.htm">Produce</a></li>
           <li><a href="getting_here/getting_here.htm">Where</a></li>
           <li><a href="customer/customer_quotes.htm">Quotes</a></li>
       </ul>
<div class="shadow-line"></div>
   </div>

Open in new window

0
 
Tony van SchaikFront-end Web developerCommented:
In CSS it's only possible to add a shadow with Filter, but that only works in IE because it uses DirectX http://msdn.microsoft.com/en-us/library/ms533086(VS.85).aspx.
You can do it with Javascript for example with jQuery: http://eyebulb.com/dropshadow/
I suggest making an images and put that in your CSS and make a div for example exactly under the menu with the shadow background image. But i use images in CSS (PNG or GIF) for this kind of things.
 
0
 
peetmAuthor Commented:
>>I suggest making an images and put that in your CSS

So, I add an image to li here?

#navigation ul {
    list-style-type: none;
    width: auto;
    margin: 0;
    padding: 0;
}
#navigation li {
    font-weight:bold;
    float: left;
    width: 70px;
}

Would I basically make an image 70px wide, or would I/could I have that stretch as I wanted?

And then what would I do in the HTML please?


<div id="navigation" align="center" style="width: 701px">
        <ul>
            <li><a href="home.htm">Home</a></li>
            <li><a href="about/about.htm">About</a></li>
            <li><a href="news/news.htm">News</a></li>
            <li><a href="photo_gallery/photo_gallery.htm">Gallery</a></li>
            <li><a href="information_links/information_links.htm">Links</a></li>
            <li><a href="faq/faq.htm">FAQ</a></li>
            <li><a href="contact/contact.htm">Contact</a></li>
            <li><a href="produce/oil_wine.htm">Produce</a></li>
            <li><a href="getting_here/getting_here.htm">Where</a></li>
            <li><a href="customer/customer_quotes.htm">Quotes</a></li>
        </ul>
    </div>

Many thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.