No replies
mammam's picture
Last seen: 11 years 1 week ago
Timezone: GMT+7
Joined: 2011-09-13
Posts: 1
Points: 2

I have a drop down CSS navigation. Here are my codes:
1) Unordered list

<div id="navigation" style="height: 25px; z-index: inherit; position: relative;">
			<li><a href="index.html">Page 1</a></li>
			<li><a href="#">Page 2</a>
				<li><a href="">Halo</a></li>
				<li><a href="">Aloha</a></li>
				<li><a href="">Howdy</a></li>
			<li><a href="#">Page 3</a></li>
			<li><a href="#">Page 4</a>
				<li><a href="">sitemap</a></li>
				<li><a href="">Contact</a></li>

2)And this my CSS code to stylize the navigation:

#navigation ul {
	padding: 0px;
	margin: 0px;
#navigation ul li {
	display: inline;
	float: left;
	width: 139px;
	list-style-type: none;
	font-family: "Times New Roman", Times, serif;
	font-size: 0.9em;
	text-transform: uppercase;
	height: 30px;
#navigation ul li a {
	color: #FFFFFF;
	text-decoration: none;
	line-height: 30px;
	width: 290px;
	display: block;
	padding-left: 0px;
	text-align: left;
	text-indent: 10px;
#navigation ul li a:hover {
	background-color: #666666;
#navigation ul li ul li a {
	background-color: #666666;
#navigation ul li ul li a:hover {
	background-color: #333333;
#navigation ul li ul {
	visibility: hidden;
	white-space: nowrap;
#navigation ul li:hover ul {
	visibility: visible;

My question is:
How can I stylize the child items to have wider width than the parent item?
For example, let's look at Page 4 in my list. I call "Page 4" a parent item. In this "Page 4", there are 2 "child items" (Sitemap, Contact). According to my CSS code, from "Page 1" to "Page 3", all things are good as the width of child items are larger than their parent items. However, the last one "Page 4" has annoying error as it comes over the size of the navigation and the width of parent item "Page 4" is similar to its child items.

I don't know why. Please help. Here is a screenshot:

You can notice that the dark grey area over the red line is abundant and I want to get rid of it.