Search code examples
htmlcssanchorblock

anchors in UL navbar not clickable outside of link itself


I have a navbar:

<div class="solidblockmenuwrapper">
                                        <ul id="solidblockmenu">
                                            <li class="my_home"><a href="http://www.playerspace.com" class="my_home ">Home</a></li>
                                            <li><a href="/index.cfm/action/features" class="null">Features</a></li>

                                            <li><a href="/faq.cfm" class="null">Contact Us</a></li>

                                                <li><a href="/improved_login.cfm" class="null">Where do I go from here?</a></li>                                        

                                                <li class="my_last"><a href="/logoff.cfm">Sign-Off</a></li>                                     

                                        </ul>   
                                    </div>                  

Here is the css:

.solidblockmenuwrapper{width:1024px;margin:0px 0px 3px 0px;padding:0px 0px 0px 10px;background-color:#CCC;border-top:2px solid #FFFFFF;border-bottom:5px solid #999;overflow:auto;position:relative;border:0px solid green;}
#solidblockmenu ul{list-style-type: none;padding:0px !important;}
#solidblockmenu li{float: left;border-right: 1px solid #FFF;}
#solidblockmenu li a{color: #666;font-weight: bold;text-decoration: none;padding: 10px 10px 10px 10px;display: block !important;}
* html #solidblockmenu ul li a {width: 1%;}
#solidblockmenu li a:hover{color:#FFF !important;background-color:#666;}
#solidblockmenu li a.my_home{padding-left:30px !important;}
#solidblockmenu li a:hover,#solidblockmenu li a.my_current{color:#FFF !important;background-color:#666;}
#solidblockmenu li.my_last {border-right:0px !important;}
#solidblockmenu li a.tryitnow{color:yellow;text-shadow: 2px 2px 2px #666;}
#solidblockmenu li.my_home{margin-left:-30px;}

for the life of me I cant seem to figure out why the anchor elements are not clickable outside of the text itself.

You can see the navbar here: http://www.playerspace.com


Solution

  • It's because your div id="content" is overlapping the nav bar. You have a negative margin on the div id="content" which is moving it up to cover the nav links.