ホバーに表示されるCSSのドロップダウンのみを取得することができます

Question

1つのドロップダウンを許可するように現在のメニューを変更したいと思います。それが思わ

nav a { 
font-weight: 800; 
padding: 5px 10px; 
display: block; 
} 

nav > ul > li.subNav ul { 
display: none; 
position: absolute; 
top: 100%; 
left: 0; 
white-space: nowrap; 
background: #fff; 
} 

nav ul li.subNav:hover ul { 
display: block; 
} 

：

<nav> 
     <ul class="menu"> 
     <li class="current"><a href="">Home</a></li> 
     <li><a href="">About Us</a></li> 
     <li class="subNav"><a class="selected">Products</a> 
     <ul> 
    <li><a href="">Designer Bags</a> 
    </li> 
    <li><a href="">Cowhides</a> 
    </li> 
    <li><a href="">Hand-carved Geese</a> 
    </li> 
    <li><a href="">Antler Chandeliers</a> 
    </li> 
    </ul> 
     <li><a href="">Gallery</a></li> 
     <li><a href="">Shows</a></li> 
     <li><a href="">Contact</a></li> 
     <li><a href="" target="_blank">Shop</a></li> 
     </ul> 
    </nav> 

マイオリジナルCSS：：私はちょうど今日追加

.nav-buttons{text-align:center;padding-bottom:17px;} 
#nav{overflow:hidden;display:inline-block} 
#nav li{float:left;overflow:hidden;margin:0 10px} 
#nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0; 
width:19px;height:19px; 
line-height:0;font-size:0; 
} 
#nav li a:hover,#nav li.showPage a{background-position: 0 bottom} 

nav{float:right;padding:12px 0 0 0} 
.menu { 
font-size:0; 
line-height:0; 
padding:0; 
z-index:99; 
position:relative; 
margin-right:21px; 
} 

.menu > li { 
position:relative; 
float:left;  
margin-left:11px; 
border-radius:5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
background:url(../images/point.png) 
} 

.menu li a{ 
color:#b3adad; 
font-size:18px; 
line-height:20px; 
display:block;  
position:relative; 
text-decoration:none !important; 
padding:7px 12px 9px; 
font-family: 'Noto Sans', sans-serif; 
} 


.menu li.current, 
.menu li:hover { 
background:#9c6f51; 
} 

.menu li.current a, 
.menu li:hover a{ 
color:#fff 
} 

そしてCSSのこのビット私のテストページがhere見つけることができますこれは私のHTMLです私はそれを上に置かない限り、私はサブメニューを参照して例外を除いて動作したい。私は元のCSSを混乱させてしまい、サイトの残りの部分で私のナビゲーションを台無しにするのを恐れているので、私はここで助けに来ました。メニューやサイトナビゲーションの残りの部分に影響を与えずに、メニューが「subNav」クラス内に表示されるように追加できるものはありますか？ （オリジナルのCSSにはこのテンプレートが付属していますが、font-size：0が数回使用されていますが、ドロップダウンを追加する必要があると感じる前にメニューがうまく機能していたので、理解せずに実験しているだけです。）

Answer 1

私はそれをソートしました。私は、サイトメニューの全体的なフォントの色を表示するために、 "subNav"クラスの背景色を変更しなければなりませんでした。それはそこにあります;私はそれを見ることができませんでした。