Er verschijnt een rare achtergrond op links in het vervolgkeuzemenu

Ik ben bezig met deze site: http://www.problemio.com en als je met de muis over de "categorieën" beweegt navigatiemenu, krijg je een rare blauwe achtergrond in de links.

Ik heb een algemene achtergrond ingesteld, die grijs is, en wit voor de verbindingskleuren, maar ik zie geen instelling voor die tussenliggende blauwe achtergrond.

Dit is mijn CSS:

.menusystem 
{
    position: absolute;
    font-size: 1em;
    color: white;
}

.menusystem ul, .menusystem li 
{
    margin: 0;
    padding: 0;
}
.menusystem li 
{
    list-style: none outside none;
}

.menusystem ul 
{
    list-style: none;
}

.menusystem ul li ul 
{
    display: none;
    position: absolute;
    top: 1.6em;
    right: 0;
    background-color: #5C5957; /* this gives the whole thing a background color */
}

.menusystem li a 
{
    text-decoration: none;
}

.menusystem ul li.main_menu_li 
{
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 7px;
    margin-bottom: 7px; 

    display: block;
    float:right;

    margin-right:0.2em;
    text-align: center;
    border-left: solid 1px white;   
/*  line-height: 1em;   */
    height: 15px;
}

.menusystem ul li.main_menu_li_left
{
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 7px;    
    margin-bottom: 7px;     

    display: block;
    float:right;
    margin-right:0.2em;
    text-align: center;


/*  line-height: 1em;   */
    height: 15px;   
}

/* IE-Win (Holly hack) reads the list item line breaks, so lets hide those \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }


.menusystem li:hover ul, .menusystem li.mouseHover ul { 
    display: block;
}

.menusystem li ul.child_menu_ul li a
{
    color: #fff;


    font-size: 80%;
    text-shadow: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-bottom: 1px solid #2e6ea4;
    border-top: 0px;
    background: none repeat scroll 0 0 #2E6EA4;
}


.menusystem li ul.child_menu_ul li.first a
{
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
    -webkit-border-top-left-radius: 14px;
    -webkit-border-top-right-radius: 14px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-top: 1px solid #2e6ea4;
}


.menusystem li ul.child_menu_ul li.last a
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
        -moz-border-radius-bottomleft: 14px;
    -moz-border-radius-bottomright: 14px;
    -webkit-border-bottom-left-radius: 14px;
    -webkit-border-bottom-right-radius: 14px;
}


.menusystem li ul.child_menu_ul li a:hover 
{
    color: #ff0;
    background: #2e6ea4; 
}

/*.menusystem li.main_menu_li a */
.menusystem ul.child_menu_ul a
{
    color: #fff;            
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}

.menusystem li.main_menu_li a:hover 
{
    color: orange;
}

Enig idee hoe ik het blauw achter de links kan laten verdwijnen?

Bedankt!!

2

3 antwoord

Heb je geprobeerd het menu te inspecteren met behulp van dev-tools? De toegepaste CSS is afkomstig van het bestand .

.menusystem li ul.child_menu_ul li a
{
    color: #fff;


    font-size: 80%;
    text-shadow: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-bottom: 1px solid #2e6ea4;
    border-top: 0px;
    background: none repeat scroll 0 0 #2E6EA4; /* blue background */
}
2
toegevoegd

Je hebt ze een achtergrond en rand gegeven van # 2e6ea4 . Verwijder de onderstaande lijnen of wijzig de hex-code.

.menusystem li ul.child_menu_ul li a{
    color: #fff;
    font-size: 80%;
    text-shadow: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-bottom: 1px solid #2e6ea4; /* delete or change this */
    border-top: 0px;
    background: none repeat scroll 0 0 #2E6EA4; /* delete or change this */
}

.menusystem li ul.child_menu_ul li.first a{
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
    -webkit-border-top-left-radius: 14px;
    -webkit-border-top-right-radius: 14px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-top: 1px solid #2e6ea4; /* delete or change this */
}
2
toegevoegd
man, je bent goed !!!
toegevoegd de auteur GeekedOut, de bron
@GeekedOut: Misschien wilt u ook opletten voor .menusystem li ul.child_menu_ul li a: hover {color: # ff0; achtergrond: # 2e6ea4; } . Het zal ze veranderen in de blauwe achtergrond bij zweven.
toegevoegd de auteur tw16, de bron

De daders zijn deze eigenschappen:

.menusystem li ul.child_menu_ul li a
{
    ...
    border-bottom: 1px solid #2e6ea4;
    border-top: 0px;
    background: none repeat scroll 0 0 #2E6EA4;
}

Also, if you are using Chrome, open the Developer Tools window (View -> Developer -> Developer Tools) to see which HTML elements are inheriting which CSS properties. If you are using Firefox, use Firebug for the same purpose.

0
toegevoegd