Solved

click all of link

Posted on 2013-06-02
6
297 Views
Last Modified: 2013-06-03
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
Comment
Question by:jagguy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39214323
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
 

Author Comment

by:jagguy
ID: 39214338
ok, I wanted a gradient link so I need to use an image instead of css3 gradient fill?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39214363
Sure.  Doing a gradient on an image should give you what you need.

Cd&
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39214459
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
 

Author Comment

by:jagguy
ID: 39215320
ok display:block works

why is this extra  line needed as the list is already block
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39215424
Yes, but the <a> within it is displayed inline by default.
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question