I am experiencing an issue on my website at . When attempting to click on a link, it seems to be disabled. I suspect this is due to the presence of two images at the end of the navigation bar. Removing these images causes the navigation bar to fall apart, but they are crucial for my client's site design.
How can I resolve this problem?
This is the HTML code:
<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>
Here is the CSS styling for the navigation elements:
/* -- 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; }