Why aren't my links working?

Question

I have some pretty simple code. The link were working a second ago and now not! (Already checked and emptied cache).

Here's my site: http://claireisabelwebb.com/index.html The nav bar on the side should go to http://claireisabelwebb.com/experiments.html , etc. The links should turn italic on hover, and a different color after they're visited.

Here's the CSS:

/* Link Styles***********************************************************************/

#home_link a:link{
        font-family: 'Lato', sans-serif;
        color: #330066;  
        text-decoration: none;
        font-size: 115px;
        font-weight: 100;
        text-align: left;
        letter-spacing: -28px;
}

#home_link a:visited{
        font-family: 'Lato', sans-serif;
        color: #330066;  
        text-decoration: none;
        font-size: 150px;
        font-weight: 100; 
        text-align: left;
        letter-spacing: -28px;
}

#main_menu a:link{
        font-family:'Lato', sans-serif;
        font-size: 30px;
        font-weight: 100; 
        color:#336699;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
}

#main_menu a:visited{
        font-family: 'Lato', sans-serif;
        font-size: 30px;
        font-weight: 100;
        color:#005522;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
}

#main_menu a:hover{
        font-family:'Lato', sans-serif;
        font-style: italic;
        font-size: 30px;
        font-weight: 100; 
        color:#CC0066;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
} 

#sec_menu a:link{
    font-family:'Lato', sans-serif;
        font-weight: 100; 
        color:#CC0066;
        text-decoration: none;
        font-size: 16px; 
        text-align: left;
        letter-spacing:0.2em;
}

#sec_menu a:visited{
        font-family:'Lato', sans-serif;
        font-weight: 100; 
        color:#005522;
        text-decoration: none;
        font-size: 16px; 
        text-align: left;
        letter-spacing:0.2em;
}

#sec_menu a:hover{
        font-family:'Lato', sans-serif;
        font-style: italic;
        font-size: 16px;
        font-weight: 100; 
        color:#CC0066;
        text-decoration: none; 
        text-align: left;
        letter-spacing:0.2em;
} 

And the html:

<!-- Main Navigation Menu ______________________________________________-->

    <div id="main_menu" class="main_wrapper_nav_box">
        <div id="sec_menu">
            <div class="main_page_nav_box">
                <a href="Experiments.html">EXPERIMENTS</a>
            </div>
            <div class="main_page_nav_box">
                <a href="writing.html">WRITING</a> 
            </div>
            <div class="main_page_nav_box">
                <a href="photography.html">PHOTOGRAPHY</a>
            </div>
            <div class="main_page_nav_box">
                <a href="graphics.html">GRAPHICS</a>
            </div>
            <div class="main_page_nav_box">
                <a href="artwork.html">ART WORK</a>
            </div>
            <div class="box_sec_nav_ms">
                <a href="artwork.html">Modernist Summer</a>
            </div>
            <div class="box_sec_nav_r">
                <a href="resume/Claire-Webb.pdf">R&#233;sum&#233;</a>
            </div>
        </div>
    </div>

Thank you in advance!

Answer 1

you can solve your problem if it is ok instead of float:left in .main_wrapper_nav_box change it relative:position and add z-index:1;

.main_page_nav_box{
        display:block;
        position:relative;
    z-index:1;
        background: rgba(255,255,255,.85);
        width:200px;
        text-align: center;
        height: 25px;
        padding:10px 10px 10px 10px;
        border:0px ;
        margin-top:10px;
        margin-left:10px;
}

working demo

hope this help...

Answer 2

Your #wrapper_text_photo div is on top of your navigation. If you re-work that, your navigation will work.

By the way, you can find issues like this yourself by using your browser tools. I recommend using Google Chrome's developer tools, or Firebug in Firefox, and mousing over the different elements in your page to see what space they are taking up. You can then remove elements to see the effect real-time. (See the blue area below)

Answer 3

You have width:1000px; for wrapper_text_photo remove it and see links will work.

In style.css line number 132

Answer 4

This DIV is and blocking clicks..

<div class="wrapper_text_photo">....</div>

You can try to put it under the links with CSS..

.wrapper_text_photo { z-index: -100;}

Answer 5

具有类wrapper_text_photo div覆盖图像。.使用css属性： z-index=-1表示该类