4 replies [Last post]
groc426
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT-7
Joined: 2008-10-23
Posts: 11
Points: 5

Hi-
I've had this problem for a while and no matter what I do I can't seem to change it, though I am fairly new with CSS. I would appreciate any input that you may have.

Web site:
http://www.moultonlava.com/php/index

Problem:
I have a vertical pop out menu contained by a "sidebar" div. The menu works fine, except for the submenus (listed items) appear to have a margin around them, that I am unable to get rid of. This means that the submenus edges are transparent, so that you see part of the content beneath them. It also means that the full width of the submenu is not highlighted when hovered over.

CSS Code:

#menu ul { 
	margin: 0; 
	padding: 3px 3px 3px 10px; 
	list-style: none;
	width: 125px; /* Width of Menu Items */ 
 
} 
 
#menu ul li { 
	position: relative; 
} 
 
#menu li ul { 
	position: absolute; 
	left: 124px; /*Set 1px less than menu width */ 
	top: 0; 
	display: block; 
	border-top: solid 1px #AE0000;
	border-right: solid 1px #AE0000;
	border-bottom: solid 1px #AE0000;
	border-left: solid 2px #AE0000;
 
} 
 
#menu li:hover ul {
	display: block; 
} 
 
#menu li:hover>ul { 
	visibility:visible; 
} 
 
#menu ul ul {
	visibility:hidden; 
} 
 
/* Fix IE. Hide from IE Mac \*/ 
* html #menu ul li { float: left; height: 1%; } 
* html #menu ul li a { height: 1%; } 
/* End */ 
 
/* Make-up syles */ 
 
#menu ul, li { 
	margin: 0; 
} 
 
/* Styles for Menu Items */ 
#menu ul a { 
	display: block; 
	text-decoration: none; 
	color: #000000; 
	font: 12px/14px Verdana, Arial, Helvetica, sans-serif ;
	font-weight:bold;
	background: #EEF53D; /* IE6 Bug */ 
	padding: 5px;
	border-bottom: 1px solid #AE0000; 
 
} 
 
/* Hover Styles */ 
#menu ul a:hover { 
	color: #E2144A; 
	background: #E5BF17; 
} 
 
/* Sub Menu Styles */ 
#menu li ul a { 
	text-decoration: none; 
	color: #000000; 
	background: #EEF53D; /* IE6 Bug */ 
	padding: 5px; /* should match menu ul a in order to line up */
	border-bottom: 0px;
} 
 
/* Sub Menu Hover Styles */ 
#menu li ul a:hover { 
	color: #E2144A; 
	background: #E5BF17; 
} 
 
/* Icon Styles */ 
#menu ul a.submenu {background:#EEF53D url("r_arrow.gif") no-repeat right; } 
#menu ul a.submenu:hover {background:#E5BF17 url("r_arrow.gif") no-repeat right;}
 
/*--------------------------SidebarB-----------------------------------------*/
.moulton #sidebar {
	float: left;
	padding: 3px 10px 0 3px;
	width: 100px;
 
 
	 /* since this element is floated, a width must be given */
 
}

Any suggestions? If you need anymore info, just let me know. Thanks in advance!

Edit
Okay i just noticed I didn't add a background color to #menu li ul. Duh! So if I add the background color #eef53d then that eliminates the transparency problem. But I still don't know how to get the hover to go clear across the width of the submenu.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 39 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

I think....

I think the problem is in this block off CSS:

#menu li ul a { 
	text-decoration: none; 
	color: #000000; 
	background: #EEF53D; /* IE6 Bug */ 
	padding: 5px; /* should match menu ul a in order to line up */
	border-bottom: 0px;
} 

Try removing the padding as the empty space i see looks around 5 pixels so it could be this.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 39 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

I'm not too sure on what your trying to acheive....

I'm not too sure on what your trying to acheive.

Please reiterate.

groc426
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT-7
Joined: 2008-10-23
Posts: 11
Points: 5

Sorry, let me try to

Sorry, let me try to clarify. I've fixed the problem with the border of my sidebar submenu being transparent. Now I would like the hover affect to expand across the entire submenu. Meaning, if I select Home>CIT 235 I would like that orange bar (hover) to go from border to border (width wise) over CIT 235, like it did over Home. Does that make sense? I hope so.

groc426
Offline
Regular
Last seen: 11 years 50 weeks ago
Timezone: GMT-7
Joined: 2008-10-23
Posts: 11
Points: 5

Boo-yah! Fixed it! It

Boo-yah! Fixed it! It appears that I needed to zero out the padding for my ul's so I changed:

#menu ul { 
	padding: 0;
.... 
}

Strange to me. But its fixed! Thank you again Josh!