Link to home
Start Free TrialLog in
Avatar of obautista
obautista

asked on

CSS UL LI Issue

Can someone help me fix a CSS issue I have with my UL/LI. I have attached a couple screenshots showing the issue and current styles.  Notice the  blue box outlining "Product" button.  It shows up when I click on one of the buttons.  I have javascript on the page that displays a drop down menu when I hover over the buttons.  The browser is recognizing the extra spacing above and below, so when I hover in the extra spacing the drop down menu shows up.  I only want the hover over functionality to work when I roll over the buttons.  

Thanks for any help given...
 User generated image User generated image
ASKER CERTIFIED SOLUTION
Avatar of CCSOFlag
CCSOFlag
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of obautista
obautista

ASKER

Thanks.  I have attached code and css...
<div class="grid_16" id="sys-globalNavContainer">
	<br />
	<div id="ctl00_g_c30a3b67_3841_4718_8a60_b6b9f8ebec49" __MarkupType="vsattributemarkup" __WebPartId="{c30a3b67-3841-4718-8a60-b6b9f8ebec49}" WebPart="true" partorder="2">
	<div id="global_nav">
		<ul>
			<li id="ProductsGlobalNav"><a href="#" title="nav-product" id="ProductsTab" class="main_item with_subnav">Products</a><div class="outerwrapper1">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Productsdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="Services-SupportGlobalNav"><a href="#" title="nav-support" id="Services-SupportTab" class="main_item with_subnav">Services-Support</a><div class="outerwrapper2">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Services-Supportdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="EducationGlobalNav"><a href="#" title="nav-education" id="EducationTab" class="main_item with_subnav">Education</a><div class="outerwrapper3">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Educationdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="CareersGlobalNav"><a href="#" title="nav-careers" id="CareersTab" class="main_item with_subnav">Careers</a><div class="outerwrapper4">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Careersdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="ContactusGlobalNav"><a href="#" title="nav-contactus" id="ContactusTab" class="main_item with_subnav">Contactus</a><div class="outerwrapper5">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Contactusdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="CompanyGlobalNav"><a href="#" title="nav-company" id="CompanyTab" class="main_item with_subnav">Company</a><div class="outerwrapper6">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Companydiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li>
		</ul>
	</div>

Open in new window

#global_nav .outerwrapper1 {
	POSITION: relative; LEFT: -60px
}
#global_nav .outerwrapper2 {
	POSITION: relative; LEFT: -200px
}
#global_nav .outerwrapper3 {
	POSITION: relative; LEFT: -340px
}
#global_nav .outerwrapper4 {
	POSITION: relative; LEFT: -480px
}
#global_nav .outerwrapper5 {
	POSITION: relative; LEFT: -620px
}
#global_nav .outerwrapper6 {
	POSITION: relative; LEFT: -760px
}
.js #global_nav LI A.with_subnav.main_item {
	BACKGROUND-IMAGE: url(/_layouts/1033/images/SysmexIRPImages/GlobalNav/navimagebeforehover.png); TEXT-ALIGN: center; PADDING-BOTTOM: 20px; LIST-STYLE-TYPE: none; TEXT-INDENT: 0px; PADDING-LEFT: 15px; WIDTH: 120px; PADDING-RIGHT: 15px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center 50%; HEIGHT: 50px; COLOR: #ffffff; FONT-SIZE: 10pt; TOP: 20px; FONT-WEIGHT: bold; LIST-STYLE-IMAGE: none; TEXT-DECORATION: none; PADDING-TOP: 32px
}
#global_nav LI A:hover A.with_subnav.main_item {
	BACKGROUND-IMAGE: url(/_layouts/1033/images/SysmexIRPImages/GlobalNav/navimageafterhover.png); TEXT-ALIGN: center; PADDING-BOTTOM: 20px; LIST-STYLE-TYPE: none; TEXT-INDENT: 0px; PADDING-LEFT: 15px; WIDTH: 120px; PADDING-RIGHT: 15px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center 50%; HEIGHT: 50px; FONT-SIZE: 10pt; TOP: 20px; FONT-WEIGHT: bold; LIST-STYLE-IMAGE: none; TEXT-DECORATION: none; PADDING-TOP: 32px
}
#global_nav LI.current A.with_subnav.main_item {
	BACKGROUND-IMAGE: url(/_layouts/1033/images/SysmexIRPImages/GlobalNav/navimageafterhover.png); TEXT-ALIGN: center; PADDING-BOTTOM: 20px; LIST-STYLE-TYPE: none; TEXT-INDENT: 0px; PADDING-LEFT: 15px; WIDTH: 120px; PADDING-RIGHT: 15px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center 50%; HEIGHT: 50px; FONT-SIZE: 10pt; TOP: 20px; FONT-WEIGHT: bold; LIST-STYLE-IMAGE: none; TEXT-DECORATION: none; PADDING-TOP: 32px
}
#global_nav .subnav_container {
	Z-INDEX: 99; POSITION: absolute; BORDER-RIGHT-WIDTH: 1px; BACKGROUND-COLOR: transparent; MARGIN-TOP: 1px; DISPLAY: none; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px
}
#global_nav UL {
	LIST-STYLE-TYPE: none; FLOAT: left; LIST-STYLE-IMAGE: none
}
#global_nav LI {
	Z-INDEX: 99; POSITION: relative; LIST-STYLE-TYPE: none; FLOAT: left; OVERFLOW: visible; LIST-STYLE-IMAGE: none; MARGIN-RIGHT: 2px
}
.js #global_nav LI A.with_subnav.main_item {
	LIST-STYLE-TYPE: none; PADDING-RIGHT: 3px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right 12px; LIST-STYLE-IMAGE: none
}
#global_nav TABLE {
	MARGIN-TOP: -33px
}

Open in new window

Avatar of Gurvinder Pal Singh
reduce the padding bottom in most of the styles and you would be good to go
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial