<li> Having Problem getting the link area to fill entire area

<li> Having Problem getting the link area to fill entire area (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

slappyJmarsden -> <li> Having Problem getting the link area to fill entire area (3/27/2009 16:44:25)

Hi,

I am working on a list item nav and I am stuck trying to find out how to make the hover clickable area larger than just the text.

I tried using the display: block; property but having no luck.

Help appreciated...thanks.

here is the link:
http://kleenkuip.com/incite/default.html

and here is the css:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0px;
 padding: 0px;
display: block;

}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;

}

ul.dropdown li {
 float: left;
 line-height: 24px;
 vertical-align: middle;
 zoom: 1;


}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;


}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;

}

ul.dropdown ul li {
 float: none;

}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;

}

ul.dropdown li:hover > ul {
 visibility: visible;
 

}

	ul.dropdown li {
	 padding: 17px 14px;
	 border-style: solid;
	 border-width: 1px 1px 1px 0;
	 border-color: #fff #d9d9d9 #d9d9d9;
	 background-color: #f6f6f6;
	 color: #000;
	 font-variant: small-caps;

}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	 background-color: #eee;
	 color: #000;


}

	ul.dropdown a:link,
	ul.dropdown a:visited	{ color: #000; text-decoration: none; }
	ul.dropdown a:hover		{ color: #000; }
	ul.dropdown a:active	{ color: #ffa500; }
	


	ul.dropdown ul {
	 width: 280px;
	 margin-top: 1px;


	}
	

		ul.dropdown ul li {
		 font-weight: normal;
	     text-decoration: none;
		 
		}


ul.dropdown *.dir {
	padding-right: 22px;
	background-image: url(images/nav-arrow-down.png);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	}


ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;

}

ul.dropdown-upward *.dir {
 background-image: url(images/nav-arrow-top.png);
}

ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(images/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(images/nav-arrow-left.png);
 background-position: 0 50%;
}


* {
 margin: 0;
 padding: 0;
}

Tailslide -> RE: <li> Having Problem getting the link area to fill entire area (3/28/2009 2:46:00)
Firstly you need to check your code as you've got errors in there that will cause you problems - e.g. no end tags for LIs. Then you need to add this: #nav a {display:block;padding: 17px 14px;} And take away the padding from the dropdown li rule. This makes the link the size that the li is currently.

jaybee -> RE: <li> Having Problem getting the link area to fill entire area (3/28/2009 10:02:58)
Hiya, Tail is correct as always. Just a heads-up though. As long as you give us a link to the page you don't need to post the code or CSS. Any web dev worth the title on here can get at what they need online. If you do have to post code for any reason, surround it with code tags so it doesn't go miles down the page. The <% button on the editor toolbar does this for you.

slappyJmarsden -> RE: <li> Having Problem getting the link area to fill entire area (3/29/2009 21:24:55)
Thank you Tailslide... It worked...but I went through my code again and I dont' see any missing end tags...maybe I am blind? Thanks for the heads-up Jaybee... I came to this forum years ago and learn table layout skills...learned A LOT. Now I am back trying my hand at CSS design...i will undoubtedly be back with many questions and problems. Thanks[:)] slappy

Tailslide -> RE: <li> Having Problem getting the link area to fill entire area (3/30/2009 2:12:41)
Here's one: <li><a href="">INCITE Products</a>

Page: [1]

0.0625