asked on

click all of link

Hi,

I cant the whole link in a list to be click able. When I hover over the writing over a link the link is able to be clicked. If I hover over the background of the link without writing it isnt clickable.

How do I enable all of the link and background of the link to be clickable?

*{
    margin:0;
    padding:0;
}

/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {

   
    #nav-status {
        display: none;    
    }

    ul#mynav {
        width: 100%;    
        min-height: 25px;
        color:#fff;
        background:red;
        overflow: visible;
    }

    ul#mynav li {
        color:#000;
        border-right: 1px solid #333;
        width: 96px;
        height: 21px;
        padding:2px;
        display: block;
        float: left;
        position: relative; 
        background:red;   
    }

    ul#mynav li:last-child {
        border-right: none;
    }

     ul#mynav li ul {
        display: none;
        width: 100px;
       position: absolute; 
        top: 25px; 
        left: -25px;
        overflow: hidden;
    }
	
	ul#mynav a {
		width: 100px;
		  color:#fff;
        background:#666;
       
	}
	
	ul#mynav a:hover {
		color:white;
		
	}
	
	ul#mynav  li:hover{
		color:white;
		background:yellow;
	}

    ul#mynav li:hover ul {
        display: block;  
	
    }
    .more{
        display:none;
    }
}

$(document).ready(function(){


$("#nav-status").click(function(e) {
    e.preventDefault();
    $('#mynav').toggle();
});
 $('ul> li').click(function() {
        $(this).children("ul").toggle();
    });

});
</script>

</head>

<body>


<div id="wrapper">

 <br />
 <br />
   
<div class="container-fluid">
   
    <div class="row-fluid">
     
          <div class='span12'>
     



<a href="#" id="nav-status">Open / Close</a>
<ul id="mynav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li>
        <a href="#">Item 5 <span class="more">></span></a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
</ul>
</div>

Open in new window

COBOLdinosaur

The live area for the click is the space occupied by the link. If you want the image to be clickable, then use an image link instead of a background image.

Cd&

jagguy

ASKER

ok, I wanted a gradient link so I need to use an image instead of css3 gradient fill?

COBOLdinosaur

Sure. Doing a gradient on an image should give you what you need.

Cd&

ASKER CERTIFIED SOLUTION