Results 1 to 2 of 2

Thread: CSS problem?

  1. #1
    Join Date
    Mar 2009
    Posts
    2

    CSS problem?

    Hi guys, i need some help here.
    I realize that my sub menu background is white in color when mouse over.
    I want it transparent.
    Tired to edit the CSS quite a few times. but it isnt working.

    Im using VB web developer. Used a template online and replace the menu area with the program's menu at web developer.

    Hope someone can help me.
    Thanks in advance.
    Appreicate any help given.

    Take care.











    CSS i used:


    /* Menu */

    #menu {
    float: left;
    width: 540px;
    height: 51px;

    }

    #menu ul {
    margin: 0;
    padding: 50px 0 0 10px;
    list-style: none;
    line-height: normal;
    }

    #menu li {
    display: block;
    float: left;
    }


    #menu a {
    display: block;
    float: left;
    margin-right: 17px;
    padding: 5px 12px;
    text-decoration: none;
    font: 14px Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;

    }

    #menu a:hover
    {
    text-decoration: underline;
    background: #000;

    }

    #menu .current_page_item a {
    color: #FFFFFF;
    }

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    This code
    #menu a:hover
    {
    text-decoration: underline;
    background: #000;
    }
    means that your background-color is black on hover, not white. The font color is white from #menu a

    Change to this:-
    #menu a:hover
    {
    text-decoration: underline;
    background: transparent;/*#000;*/
    }
    and hover should be transparent.

    If you put the black background on the #menu a style like this:-

    #menu a { background: #000;
    display: block;
    float: left;
    margin-right: 17px;
    padding: 5px 12px;
    text-decoration: none;
    font: 14px Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    }

    you will have a black background with white font normally, then transparent with white font on hover.

    Your #menu style is height: 51px; but your #menu ul style has padding: 50px 0 0 10px; which has top padding 50px and puts the link below the menu div, so edit 50px to 0 if you want it to be inside.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. Css problem
    By jpdcab in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 07 Aug 2007, 01:06 AM
  2. slight problem with CSS code
    By webguy_dave in forum General Questions
    Replies: 1
    Last Post: 17 Dec 2005, 02:55 PM

Posting Permissions

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