hover display on sub menu not workingm, doing something wrong.....

**lisaj98052** · 09-18-2014, 04:01 PM

HTML Code:

<HTML>
<HEAD>
<BODY BGCOLOR="#e1d8c9" text="061208">
<style>
	/*rules navigation menu*/
	/*=====================*/
	ul#navbar, ul.sub1, ul.sub2 {
	list-style-type: none;
	}
	ul#navbar li {
		/*border: 1px solid red;*/
		width: 150px;
		text-align: center;
		position: relative;
		float: left;
		margin-right: 4px;
		}
	ul#navbar a {
		text-decoration: none;
		display: block;
		width: 130x;
		hight: 25px;
		line-height: 25px;
		background-color: #CCCCCC;
		border: 1px solid #ccc
		border-radius: 5px;
	}
	/*Hides drop downs when not hovered over and reveals them when they are hovered over.*/
	ul#navbar ul.sub1 {
		display: none;
		position: absoulte;
		top: 26px;
		left: 10px;
	}
	ul#navbar ul li ul a:hover .sub1 {
		display: block;
	}
		ul#navbar ul.sub2 {
		display: none;
		position: absoulte;
		top: 26px;
		left: 0px;
	}
	/*list submenus menu*/
	/*=====================*/
	ul#navbar .sub1 li{
		margin-top: 3px;
	}
	ul#navbar .sub1 a{
		margin-top: 3px;
		}
	ul#navbar .sub2 li{
		margin-top: 3px;
	}
	ul#navbar .sub2 a{
		margin-top: 3px;
	}
	/*hover navigation menu*/
	/*=====================*/	
	#navbar a:hover, #navbar a:active {
		color: #000000;
		background-color: #8db3ff;
		text-decoration: underline;
		}
	#navbar ul ul{
		display: none;
		}
	#navbar li:hover li {
		float: none; }
	#navbar li:hover li a {
		background-color: yellow;
		border-bottom: 1px solid #fff;
		color: yellow; }
	#navbar li li a:hover {
		background-color: #8db3ff;
	}



</style>
</HEAD>
<h1></h1>
<UL id="navbar">
		<li><a href="L:\CADWeb\pdf\EXAMPLE PLANS\DPD PLANS.pdf"target="main">Civil Plans</a></li>
		<li><a href="L:\CADWeb\pdf\EXAMPLE PLANS\PLOT PLANS\PLOT PLANS.pdf"target="main">PLOT Plans</a>
			<ul class="sub1">
				<li><a href="L:\CADWeb\pdf\EXAMPLE PLANS\DPD PLANS.pdf"target="main"> As-Builts</a></li>
				<li><a href="L:\CADWeb\pdf\EXAMPLE PLANS\DPD PLANS.pdf"target="main"> Finshed Grade Plan </a></li>
				<li><a href="L:\CADWeb\pdf\EXAMPLE PLANS\DPD PLANS.pdf"target="main"> As-Builts</a></li>
				<li><a href="L:\CADWeb\pdf\EXAMPLE PLANS\DPD PLANS.pdf"target="main"> Finshed Grade Plan </a></li>
			</ul>
		</li>
		<li><a href="L:\CADWeb\pdf\EXAMPLE PLANS\DPD PLANS.pdf"target="main"> Development Grading Plan</a></li>
		<li><a href="L:\CADWeb\pdf\EXAMPLE PLANS\DPD PLANS.pdf"target="main"> SDOT SIP Plans</a></li>
		<li><a href="L:\CADWeb\pdf\EXAMPLE PLANS\DPD PLANS.pdf"target="main"> SDOT DPF Plans</a></li>
</ul>

</HTML>

**jscheuer1** · 09-19-2014, 04:18 AM

Code:

	ul#navbar ul.sub1 {
		display: none;
		position: absoulte;
		top: 26px;
		left: 10px;
	}
	ul#navbar  li:hover ul.sub1 {
		display: block;
	}

BTW, it's not directly related, but you've spelled absolute wrong in two places.

Thread: hover display on sub menu not workingm, doing something wrong.....

Thread Tools

Search Thread

hover display on sub menu not workingm, doing something wrong.....

Similar Threads

Chrome display wrong with crawler

Menu items display the hover state before they're hovered

Display error when I hover to dropdown menu in IE 7,8

Pagination links display wrong in Firefox

Wrong Placement for Hover Menu

Bookmarks

Bookmarks

Posting Permissions