SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding a dropshadow to a dropdown menu

    Is it possible to add a dropshadow to this menu even though I am using images for the items that currently dropdown? The reason I ask because when you mouse over the main navigation and then go to the items below all the links that are hovered over take on the color of #777.

    Code CSS:
    * {
    margin: 0;
    padding: 0;
    }
    body {
    background: transparent url('sample_bg.png') repeat-x 0 0;
    }
    #bodywrapper {
    margin: 37px auto 0;
    max-width: 960px;
    min-width: 600px;
    padding: 10px;
    background: #fdfdfd;
    }
    * html #pagewrapper {
    width: 960px;
    }
    #header {
    margin: 0 0 4px;
    height: 100px;
    background: #ccc;
    }
    /* topmost navlink styles */
    #nav {
    margin: 0 auto;
    width: 960px;
    height: 40px;
    font: bold 13px/1.2 Arial;
     
    }
     
    #nav ul li {
        float: left;
        width: 120px;
        list-style: none;
    }
    #nav ul li a {
        display: block;
        visibility: visible;
        /*border: 1px solid #999;*/
        padding-top: 12px;
        height: 28px;
        background: url("nav_image.png") repeat-x -81px 100%;
        color: #ddd;
        text-decoration: none;
    	 text-align: center;
    }
    #nav ul li a:hover {
        background:url('nav_image.png') repeat-x -40px 0%;
    }
    /*----- Begin Second Level ----- */
    #nav ul,
    #nav ul ul li{
        position: relative;
        margin: 0;
        padding: 0;
    }
    #nav ul li ul {
        position: absolute;
        left: -999em;
        top: 40px;
     
        height: 40px;
    }
    #nav ul li:hover ul ul,
    #nav ul li.sfhover ul ul {
        left: -999em;
    }
    #nav ul li:hover ul,
    #nav ul li.sfhover ul,
    #nav ul ul li:hover ul,
    #nav ul ul li.sfhover ul {
        left: auto;
    }
    #nav ul ul.subhor-1item li {
        width: 120px;
    }
    #nav ul ul.subhor-2items li {
        width: 240px;
    }
    #nav ul ul.subhor-3items li {
        width: 160px;
    }
    #nav ul ul.subhor-4items li {
        width: 120px;
    }
    #nav ul ul ul li {
        clear: left;
    }
    /****** Link Styling ******/
    #nav ul li:hover a,
    #nav ul li.sfhover a,
    #nav ul li a:hover {
        background:#777;
        color: #eee;
    }
    #nav ul li a:hover {
    		background: url('nav_image.png') repeat-x -40px 0%;
    }
    #nav ul li ul li a:hover {
        background: url('subver_bg.png');
        color: #fff;
    }
    #contentwrapper {
    margin-top: 5px;
    height: 750px;
    background: #e3e3e2;
    }
    I know I am in my own little world. But its OK "They Know Me HERE"

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The trick is, you need the shadow the adjust to each size drop. You could do whati did here. All the links/etc are in there. http://www.visibilityinherit.com/cod...-drop-down.php

  3. #3
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are the empty bold class tags the items holding the images?
    I know I am in my own little world. But its OK "They Know Me HERE"

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •