CODEWITHSUNDEEP
htmlcsshyperlink
anc1revv
anc1revv

Reputation: 1613

html links don't work properly

I'm creating the html/css for my website and the links are not "clickable".

when i get rid of the "float:left" in my "ul#menu" css, the links work. otherwise it doesnt. 

        <ul id="menu">
            <li><a href="www.facebook.com" class="active">Home</a></li>
            <li><a href="www.facebook.com">Order</a></li>
            <li><a href="www.twitter.com">How it works</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">About urrrs</a></li>   
            <a href="www.facebook.com">order</a>            
        </ul>



ul#menu{
    float: left;
    margin-left: 20px;
    margin-top: -290px;
}

ul#menu li a {
    text-decoration:none;
    color:#e2281f;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:22px;
    line-height:32px;
}

ul#menu li a.active, ul#menu li a:hover {
    background-color:#e2281f;
    color: white;
}

my webpage is located at: http://foodchute.com/

Upvotes: 1

Views: 6229

Answers (3)

Angelos Chalaris
Angelos Chalaris

Reputation: 6747

They all work if you try using tab you can select them and pressing Enter will redirect! It is just your CSS styling overlaps the links if I get this right, try playing around with it and it will make things work (not a CSS and HTML expert but I guess it can help).

Upvotes: 0

Lucas Green
Lucas Green

Reputation: 3959

Try this:

        <ul id="menu">
            <li><a href="www.facebook.com" class="active">Home</a></li>
            <li><a href="www.facebook.com">Order</a></li>
            <li><a href="www.twitter.com">How it works</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">About urrrs</a></li>   
            <a href="www.facebook.com">order</a>            
        </ul>



ul#menu{
    position:relative; /* <- important bit here */
    z-index:1; /* <- important bit here */
    float: left;
    margin-left: 20px;
    margin-top: -290px;
}

ul#menu li a {
    text-decoration:none;
    color:#e2281f;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:22px;
    line-height:32px;
}

ul#menu li a.active, ul#menu li a:hover {
    background-color:#e2281f;
    color: white;
}

Upvotes: 1

piatek
piatek

Reputation: 376

Because you have an overlapping div #shopping.

Add this to your #menu:

position:relative;
z-index:2

and this to #shopping

z-index:1

Upvotes: 0

Related Questions