ulに画像ギャラリーのクラスを渡すと、ページ上の他のulsには影響しません。

Question

私のサイトには、ナビゲーションバー用のul（リンク付き）のヘッダーがあります。私のページの

一つのイメージギャラリーのためにULを持っています。そのテンプレートはこのウェブサイトから来ています：http://www.thecssninja.com/demo/futurebox/v3/

画像ギャラリーは、私が望むことをします：クリックしたときにオーバーレイされた画像を開き、拡大された画像が中央に表示され、画面。問題は、ulがナビゲーションバーを壊すことです。どうすれば修正できますか？ナビゲーションバーには既にulクラスがあります。

ここでは、関連するCSSです：

ul li{ 
display: inline-block; 
float: left; 
list-style: none; 
margin:0.3em; 
border:0.1em solid black; 
-webkit-border-radius:0.25em; 
-moz-border-radius:0.25em; 
border-radius:0.25em; 
} 
ul li:hover { border:0.1em solid red; } 

ul li img, ul li label { 
    display: block; 
    cursor: pointer; 
} 

ul li input { display: none; } 
ul li input:checked + .overlay { display: table; } 

.overlay{ 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0; 
left: 0; 
display: none; 
z-index: 999; 
background: rgb(0,0,0); 
background: rgba(0,0,0,0.7);} 

.overlay label 
{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
    .overlay img, 
    .overlay iframe 
    { 
     display: inline; 
     border:0.25em solid white; 
     -webkit-border-radius:0.25em; 
     -moz-border-radius:0.25em; 
     border-radius:0.25em; 
    } 

は、ここにHTMLです：

<div class="text2col"> 
     <h2>Photo gallery</h2> 

<ul> 
    <li> 
     <label for="futurebox01"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label> 
     <input type="radio" id="futurebox01" name="gallery" /> 
     <div class="overlay"> 
      <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg.png" alt="The Css Ninja" width="469" height="500" /></label> 
     </div> 
    </li> 
    <li> 
     <label for="futurebox02"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label> 
     <input type="radio" id="futurebox02" name="gallery" /> 
     <div class="overlay"> 
      <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg2.png" alt="The Css Ninja" width="469" height="500" /></label> 
     </div> 
    </li> 
    <li> 
     <label for="futurebox03"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label> 
     <input type="radio" id="futurebox03" name="gallery" /> 
     <div class="overlay"> 
      <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg3.png" alt="The Css Ninja" width="469" height="500" /></label> 
     </div> 
    </li> 
    <li> 
     <label for="futurebox04"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label> 
     <input type="radio" id="futurebox04" name="gallery" /> 
     <div class="overlay"> 
      <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg4.png" alt="The Css Ninja" width="469" height="500" /></label> 
     </div> 
    </li> 
... (more li's)... 
</ul> 
<div class="clear">&nbsp;</div> 

<input type="radio" id="close" name="gallery" /> 

私もすべてulを変更することで、画像ギャラリーのためのULクラスを追加しようとしましたul.futureboxに変更して、クラスに追加して、ナビゲーションバーを通常の状態に戻すようにしました。オーバーレイ画像があります（オーバーレイはありますが、画像はページの左上に表示されます）。 ul li input:checked + .overlay { display: table; }だから、イメージギャラリーのためにクラスを追加した後：

問題は（私が思うに）オーバーレイと隣接兄弟コネクタがあるということです。または、それはまったく別の問題かもしれませんが、わかりません。

Answer 1

私は答えを見つけることができますが、このデモでは、私はそれが何をしたいすべてのものを行います。http://www.thecssninja.com/demo/futurebox/

それは隣接兄弟コネクタを持っていませんので、私はこれをテンプレートとして使用し、中に入れました画像ギャラリーの "futurebox"と呼ばれるulクラスは、ナビゲーションバーに影響を与えません。

この問題は、「戻る」ボタンでクリックしたすべての画像を通過するのに対し、もう一方の画像は戻っていないことです。