Horizontal Menu (Please Help)

Hi,

 I have a Horizontal Menu that has a sub1 and Sub2 menu, the problem that I am having is that the sub2 it is not displaying correct. when I hover over sub1 to expand sub2 instead of having sub2 expanded to the right I have it expanded below the sub1.

it is doing this:
Menu
 Sub1
 Sub2
 Sub1

 but it should do this:
Menu
Sub1   -> Sub2
 Sub1

 My menu should be
Assessment    -> Ray
                               Veronica
                               Bushy
                               Havoc


 I need your help I don't know CSS much.

This is my code:

   

<!doctype html>
<html>
<head>
<style>
* {
	margin: 0; padding: 0;
}
	#header .categories {
		list-style-type: none;
		height: 30px;
		margin-left: -15px;
		background-color: #EEEEEE;
	}
		#header .categories li {
			float: left;
		}
		#header .categories li a {
			display: block;
			padding: 9px 30px 6px;
			text-decoration: none;
			border-width: 0 1px;
			border-style: solid;
			border-color: #F0F0F0;
			
		}
		#header .categories li a:hover {
			/*border-color: #ffffff; */
			 font-weight: bold;   
			color: #ffffff; 
			background-color: #a51d43;
		}
		#header .categories li > ul {
			display: none;
			list-style: none;
			position: relative;
			z-index: 1
		}
		#header .categories li > ul li {
			float: none
		}
		#header .categories li:hover > ul {
			display: block
		}
		

</style>
</head>

<body>
<!-- BEGIN header -->
  <div id="header">
    
    <!-- begin categories -->

<menu id="nav">  
    <ul class="categories" style="font-size:12px;">
		<li><a href="index.cfm" class="index" style="font-weight:bold;">Home</a></li>
        
        <li style="width:130px;"><a href="#" class="Add" style="font-weight:bold;">Add a Test </a>
         	<ul style="width:130px;border-bottom: 1px solid #fff;border-left: 1px solid #fff;border-right: 1px solid #fff;">
 				<li><a href="AddRule.cfm" style="width:94px;float:left;padding-left:5px;">Rule</a></li>
            	<li><a href="AdHocReport.cfm" style="width:94px;float:left;padding-left:5px;">Letter</a></li>
                <li><a href="AdHocReport.cfm" style="width:94px;float:left;padding-left:5px;">CAP Admin UI</a></li>
                <li><a href="AdHocReport.cfm" style="width:94px;float:left;padding-left:5px;">Content</a> </li>
               
                <li><a href="Assessment.cfm" class="Assessment" style="width:94px;float:left;padding-left:5px;">Assessment</a>
                	
          <ul class="sub-menu">
            <li><a href="#">Ray</a></li>
            <li><a href="#">Veronica</a></li>
            <li><a href="#">Bushy</a></li>
            <li><a href="#">Havoc</a></li>
          </ul>

                </li>
                
                <li><a href="AdHocReport.cfm" style="width:94px;float:left;padding-left:5px;">test</a> </li> 
                
 			</ul>
        </li>
 		<li style="width:130px;"><a href="#" class="Report" style="font-weight:bold;">Report</a>
 		<ul style="width:130px;border-bottom: 1px solid #fff;border-left: 1px solid #fff;border-right: 1px solid #fff;">
 			<li><a href="SOReport.cfm" style="width:94px;float:left;padding-left:5px;">Status/Outcome Report</a></li>
            <li><a href="AdHocReport.cfm" style="width:94px;float:left;padding-left:5px;">Ad Hoc Report</a></li>
 		</ul>
 		</li>
        <li>
        <a class="Contact" style="font-weight:bold;" href="mailto:lmakhoul@bcbsm.com?subject=Blaze Unit Testing">
        Contact Us</a>
        </li>
 	</ul>
  </menu> 
   

    <!-- end categories -->
  </div>
  <!-- END header -->
  <div style="width:100%;height:400px;background-color:#def"></div>
</body>

</html>
  
 

Open in new window

menu.jpg
lulu50Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lulu50Author Commented:
Hello Any here that can help maybe :-)
_TAD_Commented:
This site will walk you through step-by-step

http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/


The short version is that your sub-menu is still relative with the parent menu.  You need to set the position to absolute
_TAD_Commented:
I took a closer look at your code -- all of the in-line style with the style sheet and other unnecessary code just makes it confusing.  Here is a cleaned version of your code

<html>
<body>
<menu id="nav">  
  <ul>
    <li><a href="index.cfm">Home</a></li>
    <li><a href="#" class="Add">Add a Test </a>
      <ul>
        <li><a href="AddRule.cfm">Rule</a></li>
        <li><a href="AdHocReport.cfm">Letter</a></li>
        <li><a href="AdHocReport.cfm">CAP Admin UI</a></li>
        <li><a href="AdHocReport.cfm">Content</a> </li>
        <li><a href="Assessment.cfm">Assessment</a>
          <ul class="sub-menu">
            <li><a href="#">Ray</a></li>
            <li><a href="#">Veronica</a></li>
            <li><a href="#">Bushy</a></li>
            <li><a href="#">Havoc</a></li>
          </ul>
        </li>
        <li><a href="AdHocReport.cfm">test</a> </li> 
      </ul>
    </li>
    <li><a href="#" class="Report">Report</a>
      <ul>
        <li><a href="SOReport.cfm">Status/Outcome Report</a></li>
        <li><a href="AdHocReport.cfm">Ad Hoc Report</a></li>
      </ul>
   </li>
   <li><a href="mailto:lmakhoul@bcbsm.com?subject=Blaze Unit Testing">Contact Us</a></li>
 </ul>
</menu> 

<style>


ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  background: #1bc2a2; 
} 

ul li { 
  display: block; 
  position: relative; 
  float: left; 
  background: #1bc2a2; 
} 

li ul {
  display: none; 
} 

ul li a { 
  display: block; 
  padding: 1em; 
  text-decoration: none; 
  white-space: nowrap; 
  color: #fff; 
} 

ul li a:hover { 
  background: #a51d43; 
} 

li:hover > ul { 
  display: block; 
  position: absolute; 
} 

li:hover li { 
  float: none; 
} 

li:hover a { 
  background: #1bc2a2; 
} 

li:hover li a:hover { 
  background: #a51d43; 
} 

#nav li ul li { 
  border-top: 0; 
} 

ul ul ul { 
  left: 100%; 
  top: 0; 
} 

ul:before,ul:after { 
  content: " "; /* 1 */ 
  display: table; /* 2 */ 
} 

ul:after { 
  clear: both; 
} 

</style>

</body>
</html>

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

lulu50Author Commented:
_TAD_ Thank you for responding to my question.

I copied and pasted the code that you have posted
but my submenu did not work.

Lulu
lulu50Author Commented:
What is after and before for?

ul:before,ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after {
  clear: both;
}
_TAD_Commented:
Hello Lulu.  What browser are you using? I have tested this code on IE 11, Opera, Chrome, and Firefox.  All browsers tested render this code perfectly.

Sub-menu is located: Add a Test> Assessment

As for the "Before" and "After" -- these are not required and can be deleted, but they serve an aesthetic function.

Before can inject html code before a tag.
After can inject html code after a tag.

/*   <-- These start and end a comment block  -->   */


Finally... Just in case you tested this code by inserting it into your existing code (which may not have been cleaned thoroughly) I have attached the sanitized code here
test.html
lulu50Author Commented:
I'm using IE 9

can you please test it on IE 9 ?
_TAD_Commented:
IE9 was released nearly 5 years ago.  You will want to upgrade to a modern browser.


The changes introduced to the web in the last 5 years are significant.  HTML5, CSS upgrades XML changes, and more.  


If you are unable to upgrade your browser due to employer constraints, then you will want to look at Javascript menus, not CSS.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lulu50Author Commented:
yes, I can't upgrade

oh ok Thanks,
lulu50Author Commented:
Thank you
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.