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

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

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

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> <li> Having Problem getting the link area to fill entire area

Page: [1]

slappyJmarsden

Posts: 61
Joined: 3/13/2003
Status: offline

<li> Having Problem getting the link area to fill... - 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;
}

< Message edited by jaybee -- 3/28/2009 10:03:51 >


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	RE: <li> Having Problem getting the link area to ... - 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. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to slappyJmarsden)


jaybee Posts: 14320 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: <li> Having Problem getting the link area to ... - 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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Tailslide)


slappyJmarsden Posts: 61 Joined: 3/13/2003 Status: offline	RE: <li> Having Problem getting the link area to ... - 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 (in reply to jaybee)


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	RE: <li> Having Problem getting the link area to ... - 3/30/2009 2:12:41 Here's one: <li><a href="">INCITE Products</a> _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to slappyJmarsden)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> <li> Having Problem getting the link area to fill entire area

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts