SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool CSS Menu DropDown Help

    Hi,

    I am creating a new pure CSS menu for our website.

    it looks now: http://www.1tm.com/test/test.html

    1) I need the menu items a solid color instead of an image.

    2) I need the "website design" and "SSL" menus to point left instead of right. (Cause if its right it points off the page.)

    3) I need 0 border on the menus.

    4) I need the text in the menus to be on the left hand. (Instead of centered)

    Thank you all!

    Quirks mode rocks!

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to update everyone I fixed #1 and #4 I just need help pointing the CSS dropdown to the left for "website design" and "SSL" & making the dropdown 0 borders.

    Could anyone help on this?

    #nav{
    float:left;
    width:100%;
    font: bold 24px Arial;

    list-style:none;
    border: 1px solid #625e00;
    border-width: 0px 0;

    background: black url(blockdefault.gif) center center repeat-x;
    }
    #nav li{
    float:left;
    margin-right:0px;
    position:relative;
    display:block;
    }
    #nav li a{
    display:block;
    padding: 9px 14px;
    font: bold 14px Arial;
    color: white;
    background: black url(blockdefault.gif) center center repeat-x;
    text-decoration:none;
    border-right: 1px solid white;

    }
    #nav li a:hover{
    color:#fff;
    text-decoration:underline;
    background: transparent url(blockactive.gif) center center repeat-x;
    }


    /*--- DROPDOWN ---*/

    #nav ul{
    list-style:none;

    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none */
    opacity:0; /* Set initial state to transparent */
    text-align: left;
    }
    #nav ul li{
    float:none;


    }
    #nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    display:block;

    }
    #nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    opacity:1; /* Fade to opaque */
    }
    #nav li:hover a{ /* Set styles for top level when dropdown is hovered */


    background: transparent url(blockactive.gif) center center repeat-x;
    text-decoration:none;



    }

    #nav li:hover li a {color:#FFF; background:#980E10;

    }


    }

    #nav li:hover ul a{ /* Override some top level styles when dropdown is hovered */
    padding: 9px 14px;
    top:-2px;
    text-decoration:none;
    border-style:solid;
    border-width:0px;
    }
    #nav li:hover ul li a:hover{ /* Set styles for dropdown when items are hovered */
    background:#E13C40;
    border-style:solid;
    border-width:0px;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed thanks!


Tags for this Thread

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
  •