0 Replies - 672 Views - Last Post: 18 August 2009 - 07:30 PM

#1 Dreamcore  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 14-August 06

css menu height problem - Resolved

Posted 18 August 2009 - 07:30 PM

Sorry please ignore this post the problem has been resolved :)



Hello Everyone,

I'm desperately seeking a solution to this problem and would appreciate any help if possible.
I am trying to create a standard css horizontal drop down menu bar with child links. The menu needs to fit several links in a limited space which requires the parent link text to be 2 lines.

a single parent link example
---------
product
name
---------

My problem is that I am unable to evenly get the nav li block background to change color on hover for the full 54px height. I have tried line-height but this does not help because 'some' of the parent menu links have two lines (if the link was just one line it actually worked just fine). I believe that display: table-cell; can work, but it looked odd in IE unless I actually put the menu in tables which I'd like to avoid if possible.

#navbar {
	background: #1A4E88;
	width: 960px;
	height: 30px;
	margin: 0px auto 0px;
	padding: 0px;
	overflow: hidden;
	}
	
#nav {
	margin: 0px;
	padding: 0px;
	list-style: none;
	}
	
#nav ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	}

#nav a {
	color: #FFFFFF;
	display: block;
	font-size: 11px;
		font-weight: bold;
		text-transform: uppercase;
		margin: 0px 15px 0px 0px;
	padding: 8px 10px 8px 10px;
	text-decoration: none;
	}
	
#nav a:hover {
	background: #4A7EB8;
	color: #FFFFFF;
	display: block;
	text-decoration: none;
		margin: 0px 15px 0px 0px;
	padding: 8px 10px 8px 10px;
	}

#nav li {
	float: left;
	margin: 0px;
	padding: 0px;
	}
	
#nav li li {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 140px;
	}
	
#nav li li a, #nav li li a:link, #nav li li a:active, #nav li li a:visited {
	background: #4A7EB8;
	color: #FFFFFF;
	width: 140px;
	font-size: 10px;
	float: none;
	margin: 0px;
	padding: 8px 10px 8px 10px;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	text-decoration: none;
	}
	
#nav li li a:hover {
	background: #1A4E88;
	color: #FFFFFF;
	padding: 8px 10px 8px 10px;
	}

#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	}

#nav li:hover ul {
	left: auto;
	display: block;
	}
	
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	}



Here is an example of the html. The original has 12 parent links that need to be spread out the link text formatted as mentioned
above. cross browser compatibility (within reason) is important to me.

<div id="navbar">
		<ul id="nav">
<li><a href="index.php">Home</a></li>

 <li><a href="parent-link1.php">Parent Link</a>
<ul>
	<li><a href="child-link1.php">Child Link 1</a></li>

	<li><a href="child-link2.php">Child Link 2/a></li>
</ul>
</li>
 
<li><a href="contact-us.php">Contact</a></li>
		</ul>
</div>




Resolved by the following:
#nav li a{
height:38px;
}
#nav li li a{
height:auto;
}

This post has been edited by Dreamcore: 19 August 2009 - 07:57 AM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1