マウスオーバー時にナビゲーションドロップダウンの背景が表示されない

Question

私はこのサイトで作業しています：http://www.problemio.comと、ページ上部の「カテゴリ」ナビゲーション項目の上にマウスを置くと、欠落している背景が表示されます。ここで

私はそれのために使う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; 
} 

.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; 
} 

誰かが背景に茶色や濃い色のいくつかの並べ替えを作成する方法を教えていただけますか？ありがとう！

Answer 1

かなりシンプルです。あなただけのメニューulドロップダウンをターゲットとbackground-colorを設定する必要があります。

.menusystem ul li ul { 
    display: none; 
    position: absolute; 
    top: 1.6em; 
    right: 0; 
    background-color: #391C07; /* add this */ 
} 

あなたは明らかにあなたが表示されたいどんな色に進コード#391C07を変更することができます。