Clicking highlighted Link in Unoredered list
Here's a sample of the page I'm working with. The problem is that the user has to click on the link before they are directed to the target page. Is there a way of ma开发者_如何学Goking the highlighted box for each of those links active and respond to click as well?
My users are complaining that unless they click on the link, clicking in the box does not work.
Any help will be appreciated.
<html>
<head>
</head>
<style type="text/css">
li {
background-color: #F5F2EE;
background-position: left top;
background-repeat: no-repeat;
border: 1px solid #E9E3DD;
height: auto;
width: 100px;
margin-bottom: 4px;
padding: 4px 5px 4px 20px;
}
li a, span {
color: #4B0F19;
text-decoration: none;
}
li:hover {
background-color: #DEB887;
cursor: pointer;
}
</style>
<body>
Hello world
<ul>
<li><a href="http://google.com">Please see this</a></li>
<li><a href="http://msn.com">Another link</a></li>
<li><a href="http://twitter.com">The main link</a></li>
<li><a href="http://bbc.co.uk">fourth link</a></li>
</ul>
</body>
</html>
Make the li have 0 padding and margin, the a display: block;, and move the styles to a.
This way the a will expand to fill all the li, and so there will be no area that is part of the menu item but it not filled by the a.
Does this make sense? Do you understand the different approach?
live example: http://jsfiddle.net/NB6Wx/
(You could also capture the click on the li with JavaScript, and trigger a click in the a... but that would be patching a problem that can actually be solved.)
(A bad solution.)
Well as far as i understood the problem is <a> is displaying as inline element. you can modify the CSS to make it block element and it will take the whole <li> element.
Like
li a {
display:block;
width:100%;
}
You Need to add li a {display:block;} to your CSS.
Here is a Working DEMO
加载中,请稍侯......
精彩评论