Ссылки отключены

Question

На моем сайте: Когда вы пытаетесь нажать на ссылку, они отключены. Я думаю, что это из-за двух изображений, которые находятся в конце панели навигации. Я попытался удалить изображения из навигации, но затем навигация разваливается. Это сайт для клиента, и у меня должны быть эти изображения.

Как я могу заставить это работать?

Мой HTML:

<div class="ref1"> <img src="images/ref1.png" alt="Ref" /> </div> 
    <nav> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about-us.html">About Us</a></li> 
     <li><a href="https://clients.elektrikhost.com/">Client Login</a></li> 
     <li><a href="https://clients.elektrikhost.com/submitticket.php">Support</a></li> 
     <li><a href="contact.html">Contact</a></li> 

    </ul> 
    </nav> 
    <div class="ref2"><img src="images/ref2.png" alt="Ref" /></div> 

CSS:

/* -- NAV -- */ 
nav { background: #282828 url(../images/nav-bg.jpg) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: -37px 0 -28px 0; } 
nav ul { padding: 21px 0; } 
nav ul li { background: url(../images/nav-sep.jpg) left center no-repeat; display: inline; padding: 0 47px; margin: 0 8px 0 0; } 
nav ul li:first-of-type { background: none; } 
nav ul li a { color: #626262; font: 1.2em Arial, Helvetica, serif; } 
nav ul li a:hover { color: #dfdfdf; } 

.ref1 { position: relative; top: 8px; left: -2px; } 
.ref2 { position: relative; top: -17px; left: 844px; } 

Answer 1

Глядя на сайт с Firebug, я вижу, что <div class="ref1"> перекрывает текст ссылки. Это также (неявно) на более высоком уровне z, чем текст ссылки, поэтому предотвращается переходы по кликам.

Я думаю, что div содержит только изображение, которое целиком находится слева от ссылок, поэтому, если вы установите ширину .ref1, чтобы он не расширялся дальше, чем нужно, это должно сортировать вас.

Answer 2

это потому, что

<div class="ref1"> <img src="images/ref1.png" alt="Ref" /> </div> 

находится над вашей ссылки. зачем тебе это надо?

Answer 3

Похоже, что это проблема ref1 - похоже, она закрывает ваши ссылки.

В качестве быстрого теста, возможно, измените z-index, чтобы узнать, является ли это проблемой.

.ref1 { position: relative; top: 8px; left: -2px; z-index: 99999; }

Answer 4

, когда я удалить "положение: относительная;" свойство from ref1 с firebug, работает ссылка.