[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

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

0
jagguy
Asked:
jagguy
  • 2
  • 2
  • 2
1 Solution
 
COBOLdinosaurCommented:
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&
0
 
jagguyAuthor Commented:
ok, I wanted a gradient link so I need to use an image instead of css3 gradient fill?
0
 
COBOLdinosaurCommented:
Sure.  Doing a gradient on an image should give you what you need.

Cd&
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Robert SchuttSoftware EngineerCommented:
What I would do is add
display: block;

Open in new window

to the css for
ul#mynav a

Open in new window

you should be able to add the gradient to it as well (instead of background color).
0
 
jagguyAuthor Commented:
ok display:block works

why is this extra  line needed as the list is already block
0
 
Robert SchuttSoftware EngineerCommented:
Yes, but the <a> within it is displayed inline by default.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now