Rollover CSS

[TomTom100]

Hi, I have a rollover menu with drop down items but when I hover over the drop down items for it to become a link you have to hover over the text and not just the box. How can I fix this?

.navMenu {
	margin-top:-20px;
	padding:0;
}

.navMenu ul {
	margin:0;
	padding:0;
	line-height:20px;
}

.navMenu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background-color:#000;
	opacity:0.9;
}

.outer {
	background-color:#000;
	opacity:0.9;
}

.navMenu .inner {
	background-color:#000;
	display:block;
	opacity:1;
	width:200px;
	background: -moz-linear-gradient(left, #174d7c 0%, #2f69a4 47%, #174d7c 99%, #174d7c 100%);;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#174d7c), color-stop(47%,#2f69a4), color-stop(99%,#174d7c), color-stop(100%,#174d7c));
}

.navMenu ul li a {
	text-align:center;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	font-weight:normal;
	text-decoration:none;
	width:75px;
	height:20px;
	display:block;
	color:#FFF;
}

.navMenu ul ul {
	position:absolute;
	visibility:hidden;
	top:20px;
}

.navMenu ul li:hover ul {
	visibility:visible;
}

.navMenu li:hover {
	background-color:#000;
	opacity:0.9;
}

.navMenu ul li:hover ul li a:hover {
	background:#1e456c;
	color:#FFF;
	text-decoration:underline;
	width:193px;
	text-align:left;
}

.navMenu a:hover {
	color:#FFF;
	text-decoration:underline;
}

.navMenu ul li:hover a {
	color:#FFF;
}

.navMenu ul li:hover li a {
	color:#FFF;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
} 

.edge {
	background-color:#000;
	opacity:0.9;
	width:500px;
}

.navMenu .inner a {
	text-align:left;
	padding-left:7px;
}

#prices {
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

<div class="navMenu">
		<ul>
			<li><a href="#">Home</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>
   
    
	<div class="navMenu">
		<ul>
			<li><a href="#">About Us</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>


	<div class="navMenu">
		<ul>
			<li class="outer"><a href="#">Stay Here</a>
				<ul>
					<li class="inner" ><a href="#">Book</a></li>
					<li class="inner" ><a href="#">Rooms</a></li>
                    <li class="inner" id="prices" ><a href="#">Prices</a></li>
				</ul>
			</li>
		</ul>
	</div>

	<div class="navMenu">
		<ul>
			<li><a href="#">Gallery</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>


	<div class="navMenu">
		<ul>
			<li class="edge"><a href="#">Contact</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>

Thanks

[ijs]

Firstly, actually big box (menu item) as link is better, than just text link in drop down menu. Better for usability - the area is bigger and easy to access.

Secondly, you just need to change it from

<li><a>link</a></li>

to

<a><li>link</li></a>

and add to this li css code with params of block (width, height, line-height, etc). And make it like menu items on cnn.com

[zebedeee]

You can set the width of the a in the sub nav the same width as the list item. Just change this rule:-

.navMenu ul li:hover li a {
	width:193px; /* add this width */
	color:#FFF;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

Not sure its validates having the <a><li>link</li></a>

[TomTom100]

Thanks for your help, its sorted now


Thanks
Thomas