• Hi there, I’m a bit new to CSS etc. and I’m just having a problem with my navigation. When hovering over the nav menu, the area around it is clickable, but if ones mouse is actually on the text you cannot click it.

    Here’s the menu CSS:

    #nav {
    	margin-top: 12px;
    	text-align: right;
    }
    
    #nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	text-align: center;
    	background-color:#cda48b;
    	opacity:0.9;
    }
    
    #nav ul li {
    	margin: 0 20px;
    	padding: 0;
    	display: inline;
    	font-size: 1em;
    	text-transform: uppercase;
    	position: relative;
    	text-align: left;
    	z-index: -1;
    }
    
    #nav ul li a {
    	display: inline-block;
    	padding: 13px 0 13px 0;
    }
    
    #nav ul li ul {
    	clear: both;
    	width: 170px;
    	left: -9999px;
    	margin: 0;
    	padding: 13px 0 13px 0;
    	top: 32px;
    	position: absolute;
    	background: #cda48b;
    	z-index: 1000;
    	text-align: left;
    }
    
    #nav ul li:hover ul {
    	left: -9px;
    }
    
    #nav li li {
    	display: block;
    	margin: 0;
    	padding: 0;
    	border-left: 1px solid #ddd;
    	border-right: 1px solid #ddd;
    	border-bottom: 1px solid #ddd;
    	font-size: 12px;
    	color:#fff;
    }
    
    #nav li li a {
    	display: block;
    	padding: 3px 9px;
    	line-height: 16px;
    }

    If you need any more information please let me know, thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Nav Menu Text Not Clickable’ is closed to new replies.