Навигационная панель, использующая другие эльмы в CSS

Question

Привет, у меня была панель навигации, которая отлично работала. Затем я добавил эффект лайтбокса. Оба работают отлично, но в моем css они запутались. Когда я добавил некоторые css для эффектов лайтбокса в div, он испортил мою панель навигации. Я думаю, что это связано с тегом a. Мой код ниже

Html:

<div id="nav"> 
      <ul> 
       <li><a href="#home">Home</a></li> 
       <li><a href="#news">Regsiter</a></li> 
       <li><a href="#contact">Rules</a></li> 
       <li><a href="#about">Photo's</a></li> 
       <li><a href="#about">Contact Us</a></li> 
      </ul> 
</div> 


<div class = "lightbox"> 
    <a href="images/image1.jpg" rel="lightbox[group]"><img src="images/image1t.jpg" /></a> 
    <a href="images/image2.jpg" rel="lightbox[group]"><img src="images/image2t.jpg" /></a> 
    <a href="images/image3.jpg" rel="lightbox[group]"><img src="images/image3t.jpg" /></a> 
    <a href="images/image4.jpg" rel="lightbox[group]"><img src="images/image4t.jpg" /></a> 
    <a href="images/image5.jpg" rel="lightbox[group]"><img src="images/image5t.jpg" /></a> 
    <a href="images/image6.jpg" rel="lightbox[group]"><img src="images/image6t.jpg" /></a> 
</div> 

CSS:

#nav ul 
{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 

#nav ul li 
{ 
    float:left; 
} 

#nav a:link,a:visited 
{ 
    display:block; 
    width:163.2px; 
    height: 35px; 
    font-weight:bold; 
    color:#FFFFFF; 
    background-color:#181818; 
    text-align:center; 
    text-decoration:none; 
    text-transform:uppercase; 
    line-height: 35px; 
} 

#nav ul li a:hover 
{ 
    background-color:#989898; 
} 

// Ниже лайтбокс CSS

a 
{ 
    border:3px solid #ccc; 
    display:block; 
    float:left; 
    margin:10px; 
} 

a img 
{ 
    margin:3px; 
} 

a:hover 
{ 
    border:3px solid #666; 
} 
img 
{ 
     display:block; 
} 

Как я уже сказал. Если я удаляю световой блок CSS, навигационная панель работает нормально. Когда я добавляю его, граница на панели навигации и все меняется. Я думаю, что это связано с тем, что оба имеют тег a, но не уверены. Спасибо за помощь.

Answer 1

Нанести осветителя CSS только к элементам внутри осветителя:

.lightbox a{ 
    border:3px solid #ccc; 
    display:block; 
    float:left; 
    margin:10px; 
} 

.lightbox a img{ 
    margin:3px; 
} 

.lightbox a:hover{ 
    border:3px solid #666; 
} 
.lightbox img{ 
    display:block; 
} 

Demo: http://jsfiddle.net/42BjW/ (я не имею Lightbox JS, так что, очевидно, сам Lightbox не работает)

Answer 2

просто добавить .lightbox перед вашими более поздними занятиями, лайтбокс css