Change direction of navagation bar

Hi Experts.  With the help of an expert on here, I was able to get my css navagation bar put together and implemented on my site.  I am curious to see how the nav bar would look vertical instead of horizontal (current setup).  How can I change this?  The code is below.

Thanks in advance for your help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />   
<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>   
<style>   
/* These styles just pretty up the page a bit. */   
body {   
   font: 62.5%/1.2 times, sans-serif;   
   background-color: #fffff; }   
#wrap {   
   font-size: 18px;   
   padding: 50px;   
   margin: 0;    
   position: absolute; 
   left:-50px; 
   top:-50px; 
  
   
/* These styles create the dropdown menus. */   
#navbar {   
   margin: 0;   
   padding: 50;   
   height: 1.5em; }   
#navbar li {   
   list-style: none;   
   float: left; }   
#navbar li a {   
   display: block;   
   padding: 3px 20px;   
   background-color: #006600;   
   color: #fff;   
   text-decoration: none; }   
#navbar li ul {   
   display: none;    
   width: 10em; /* Width to help Opera out */   
   background-color: #009933;}   
#navbar li:hover ul, #navbar li.hover ul {   
   display: block;   
   position: absolute;   
   margin: 0;   
   padding: 0; }   
#navbar li:hover li, #navbar li.hover li {   
   float: none; }   
#navbar li:hover li a, #navbar li.hover li a {   
   background-color: #00cc33;   
   border-bottom: 1px solid #009933;   
   color: #ffff; }   
#navbar li li a:hover {   
   background-color: #009933; }   
   #navbar li ul li {   
                font-size:14px;      
   }   
</style>   
   
<script>   
// Javascript originally by Patrick Griffiths and Dan Webb.   
// http://htmldog.com/articles/suckerfish/dropdowns/   
sfHover = function() {   
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");   
   for (var i=0; i<sfEls.length; i++) {   
      sfEls[i].onmouseover=function() {   
         this.className+=" hover";   
      }   
      sfEls[i].onmouseout=function() {   
         this.className=this.className.replace(new RegExp(" hover\\b"), "");   
      }   
   }   
}   
if (window.attachEvent) window.attachEvent("onload", sfHover);   
</script>   
   
</head>   
<body>   
   <div id="wrap">   
      <ul id="navbar">   
      <!-- The strange spacing herein prevents an IE6 whitespace bug. -->   
         <li><a href="#">Main</a>   
         </li>   
         <li><a href="#">Home Users</a><ul>   
               <li><a href="#">Service and Repair Options</a></li><li>   
                    <a href="#">Do It Yourself (DIY)</a></li><li>
                    <a href="#">Customer Rewards/Referrals</a></li>
                    <a href="#">PC Wellness Center</a></li>
                    <a href="#">Start Remote Assistance</a></li></ul>   
         </li>   
         <li><a href="#">Small Business</a></li><ul>   
               <li><a href="#">Service and Repair Options</a></li><li>   
                    <a href="#">Business Case Studies</a></li></ul>   
            <li><a href="#">Store</a><ul>   
               <li><a href="#">Online Shopping Center</a></li></ul>     
            <li><a href="#">Why Choose Us</a><ul>   
               <li><a href="#">Customer Reviews</a></li>   
               <a href="#">Business Case Studies</a></li></ul>     
            <li><a href="#">Games</a><ul>   
               <li><a href="#">BattleMechs</a></li><li>   
               <a href="#">Empire of the Galadur</a></li><li>   
               <a href="#">Airport Madness 2</a></li></ul>
         </li>   
      </ul>   
   </div>   
   
</body>   
</html>

Open in new window

LVL 9
samiam41Asked:
Who is Participating?
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.

exalkoniumCommented:
What about something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>  
<style>  
/* These styles just pretty up the page a bit. */  
body {  
   font: 62.5%/1.2 Arial, Helvetica, sans-serif;  
   background-color: #eee; }  
#wrap {  
   font-size: 18px;  
   /*width: 858px; */ 
   padding: 50px;  
   margin: 0;   
   position: absolute;
   left:-50px;
   top:-50px;
   overflow:visible;
}  
  
/* These styles create the dropdown menus. */  
#navbar {  
   margin: 0;  
   padding: 50;  
   height: 1.5em; }  
#navbar li {  
   list-style: none;  
   float: left;
   clear:both;
   width:250px;
}
#navbar li a {  
   display: block;  
   padding: 3px 20px;  
   background-color: #006600;  
   color: #fff;  
   text-decoration: none; }  
#navbar li ul {  
   display: none;   
   width: 10em; /* Width to help Opera out */  
   background-color: #009933;}  
#navbar li:hover ul, #navbar li.hover ul {  
   display: block;  
   position: absolute;  
   margin: 0;  
   padding: 0;
   left:160px;
}  
#navbar li:hover li, #navbar li.hover li {  
   float: none; }  
#navbar li:hover li a, #navbar li.hover li a {  
   background-color: #33FF33;  
   border-bottom: 1px solid #009933;  
   color: #000; }  
#navbar li li a:hover {  
   background-color: #009933; }  
   #navbar li ul li {  
                font-size:12px;     
   }  
</style>  
  
<script>  
// Javascript originally by Patrick Griffiths and Dan Webb.  
// http://htmldog.com/articles/suckerfish/dropdowns/  
sfHover = function() {  
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");  
   for (var i=0; i<sfEls.length; i++) {  
      sfEls[i].onmouseover=function() {  
         this.className+=" hover";  
      }  
      sfEls[i].onmouseout=function() {  
         this.className=this.className.replace(new RegExp(" hover\\b"), "");  
      }  
   }  
}  
if (window.attachEvent) window.attachEvent("onload", sfHover);  
</script>  
  
</head>  
<body>  
   <div id="wrap">  
            <ul id="navbar">  
                <!-- The strange spacing herein prevents an IE6 whitespace bug. -->  
                <li><a href="#">Main</a></li>  
                <li><a href="#">Home Users</a>
                    <ul>  
                        <li><a href="#">Service and Repair Options</a></li>
                        <li><a href="#">Do It Yourself (DIY)</a></li>
                        <li><a href="#">Customer Rewards/Referrals</a></li>
                        <li><a href="#">PC Wellness Center</a></li>
                        <li><a href="#">Start Remote Assistance</a></li>
                    </ul>  
                </li>  
                <li><a href="#">Small Business</a>
                	<ul>  
                		<li><a href="#">Service and Repair Options</a></li>
                		<li><a href="#">Business Case Studies</a></li>
                    </ul>
                </li>
                <li><a href="#">Store</a>
                	<ul>  
                		<li><a href="#">Online Shopping Center</a></li>
                    </ul>
                </li>
                <li><a href="#">Why Choose Us</a>
                	<ul>  
                		<li><a href="#">Customer Reviews</a></li>
                		<li><a href="#">Business Case Studies</a></li>
                    </ul>
                </li>
                <li><a href="#">Games</a>
                    <ul>  
                        <li><a href="#">BattleMechs</a></li>
                        <li><a href="#">Empire of the Galadur</a></li>
                        <li><a href="#">Airport Madness 2</a></li>
                    </ul>
                </li>  
            </ul>  
   </div>  
  
</body>  
</html>

Open in new window

0
exalkoniumCommented:
I cleaned up your list area too, BTW. ;)
0
samiam41Author Commented:
Thanks exalkonium and congrats on the master rank!  Was the lack of order driving you crazy in the code?

I am attaching a screenshot of what the website looks like now.  It appears the dropdown menu is covering up the option below.


web.example.v1.bmp
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

exalkoniumCommented:
That was how I set it. If you want to correct this, change this section's left attribute:

#navbar li:hover ul, #navbar li.hover ul {  
   display: block;  
   position: absolute;  
   margin: 0;  
   padding: 0;
   left:160px;
}

to something like this:
#navbar li:hover ul, #navbar li.hover ul {  
   display: block;  
   position: absolute;  
   margin: 0;  
   padding: 0;
   left:290px;
}

Open in new window

0
exalkoniumCommented:
Thanks for the compliment! I already had one for javascript, but your questions have helped me hit Master for CSS and also let me hit Guru for an overall expert!
0
samiam41Author Commented:
I thought I noticed you had the "master" shield being displayed.  Very cool.  You sure earned it especially working through my mess.  Which brings me to this.  I saw what you changed and thought I would try my hand at "tweaking" the code a little.  I didn't mess it up (I think) but I'm not sure why the page isn't highlighted now when you put your mouse over it.  The window pops up but the option isn't selected.  
web.example.v1.1.JPG
0
samiam41Author Commented:
And as you can tell from the pic, somehow there is dark green in the flyout window instead of the lighter green.  I am guessing that in my tweaking, I changed a size value that wasn't consistent elsewhere.  
0
samiam41Author Commented:
Aww crap!  When I made the change to where the flyout window (is that the correct term?), some how now I can't get the mouse from the page name over to the new window.  Here is the -modified- code...  Sorry for messing it up.  Just wanted to see how I did (or didn't) know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />    
<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>    
<style>    
/* These styles just pretty up the page a bit. */    
body {    
   font: 62.5%/1.2 times, sans-serif;    
   background-color: #fffff; }    
#wrap {   
   font-size: 18px;   
   /*width: 858px; */  
   padding: 80px;   
   margin: 0;    
   position: absolute; 
   left:-50px; 
   top:-50px; 
   overflow:visible; 
}   
   
   
    
/* These styles create the dropdown menus. */    
#navbar {    
   margin: 0;    
   padding: 50;    
   height: 1.5em; }    
#navbar li {   
   list-style: none;   
   float: left; 
   clear:both; 
   width:170px; 
}  
#navbar li a {    
   display: block;    
   padding: 3px 20px;    
   background-color: #006600;    
   color: #fff;    
   text-decoration: none; }    
#navbar li ul {    
   display: none;     
   width: 10em; /* Width to help Opera out */    
   background-color: #009933;}    
#navbar li:hover ul, #navbar li.hover ul {   
   display: block;   
   position: absolute;   
   margin: 0;   
   padding: 0; 
   left:300px; 
} 
#navbar li:hover li, #navbar li.hover li {    
   float: none; }    
#navbar li:hover li a, #navbar li.hover li a {    
   background-color: #00cc33;    
   border-bottom: 1px solid #009933;    
   color: #ffff; }    
#navbar li li a:hover {    
   background-color: #009933; }    
   #navbar li ul li {    
                font-size:14px;       
   }    
</style>    
    
<script>    
// Javascript originally by Patrick Griffiths and Dan Webb.    
// http://htmldog.com/articles/suckerfish/dropdowns/    
sfHover = function() {    
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");    
   for (var i=0; i<sfEls.length; i++) {    
      sfEls[i].onmouseover=function() {    
         this.className+=" hover";    
      }    
      sfEls[i].onmouseout=function() {    
         this.className=this.className.replace(new RegExp(" hover\\b"), "");    
      }    
   }    
}    
if (window.attachEvent) window.attachEvent("onload", sfHover);    
</script>    
    
</head>    
<body>    
   <div id="wrap">    
      <ul id="navbar">    
      <!-- The strange spacing herein prevents an IE6 whitespace bug. -->    
         <li><a href="#">Main</a>    
         </li>    
         <li><a href="#">Home Users</a><ul>    
               <li><a href="#">Service and Repair Options</a></li><li>    
                    <a href="#">Do It Yourself (DIY)</a></li><li> 
                    <a href="#">Customer Rewards/Referrals</a></li> 
                    <a href="#">PC Wellness Center</a></li> 
                    <a href="#">Start Remote Assistance</a></li></ul>    
         </li>    
         <li><a href="#">Small Business</a></li><ul>    
               <li><a href="#">Service and Repair Options</a></li><li>    
                    <a href="#">Business Case Studies</a></li></ul>    
            <li><a href="#">Store</a><ul>    
               <li><a href="#">Online Shopping Center</a></li></ul>      
            <li><a href="#">Why Choose Us</a><ul>    
               <li><a href="#">Customer Reviews</a></li>    
               <a href="#">Business Case Studies</a></li></ul>      
            <li><a href="#">Games</a><ul>    
               <li><a href="#">BattleMechs</a></li><li>    
               <a href="#">Empire of the Galadur</a></li><li>    
               <a href="#">Airport Madness 2</a></li></ul> 
         </li>    
      </ul>    
   </div>    
    
</body>    
</html>

Open in new window

0
exalkoniumCommented:
Maybe this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>CSSnewbie Example: CSS-Only Dropdown Menu</title>  
<style>  
/* These styles just pretty up the page a bit. */  
body {  
   font: 62.5%/1.2 Arial, Helvetica, sans-serif;  
   background-color: #eee; }  
#wrap {  
   font-size: 18px;  
   /*width: 858px; */ 
   padding: 50px;  
   margin: 0;   
   position: absolute;
   left:-50px;
   top:-50px;
   overflow:visible;
}  
  
/* These styles create the dropdown menus. */  
#navbar {  
   margin: 0;  
   padding: 50;  
   height: 1.5em; }  
#navbar li {  
   list-style: none;  
   float: left;
   clear:both;
   width:250px;
}
#navbar li a {  
   display: block;  
   padding: 3px 20px;  
   background-color: #006600;
   color: #fff;  
   text-decoration: none; }  
#navbar li ul {  
   display: none;   
   width: 10em; /* Width to help Opera out */  
  /* background-color: #009933;*/}  
#navbar li:hover ul, #navbar li.hover ul {  
   display: block;  
   position: absolute;  
   margin: 0;  
   padding: 0;
   left:160px;
}  
#navbar li:hover li, #navbar li.hover li {  
   float: none; }  
#navbar li:hover li a, #navbar li.hover li a {  
   background-color:transparent;
   border-bottom: 1px solid #009933;  
   color: #000; }  
#navbar li li a:hover {  
   /*background-color: #009933;*/ }  
   #navbar li ul li {
	   background-color:#009933;
                font-size:12px;
   }
   #navbar li ul li:hover {
	   background-color:#33FF33;
                font-size:12px;
   }
</style>  
  
<script>  
// Javascript originally by Patrick Griffiths and Dan Webb.  
// http://htmldog.com/articles/suckerfish/dropdowns/  
sfHover = function() {  
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");  
   for (var i=0; i<sfEls.length; i++) {  
      sfEls[i].onmouseover=function() {  
         this.className+=" hover";  
      }  
      sfEls[i].onmouseout=function() {  
         this.className=this.className.replace(new RegExp(" hover\\b"), "");  
      }  
   }  
}  
if (window.attachEvent) window.attachEvent("onload", sfHover);  
</script>  
  
</head>  
<body>  
   <div id="wrap">  
            <ul id="navbar">  
                <!-- The strange spacing herein prevents an IE6 whitespace bug. -->  
                <li><a href="#">Main</a></li>  
                <li><a href="#">Home Users</a>
                    <ul>  
                        <li><a href="#">Service and Repair Options</a></li>
                        <li><a href="#">Do It Yourself (DIY)</a></li>
                        <li><a href="#">Customer Rewards/Referrals</a></li>
                        <li><a href="#">PC Wellness Center</a></li>
                        <li><a href="#">Start Remote Assistance</a></li>
                    </ul>  
                </li>  
                <li><a href="#">Small Business</a>
                	<ul>  
                		<li><a href="#">Service and Repair Options</a></li>
                		<li><a href="#">Business Case Studies</a></li>
                    </ul>
                </li>
                <li><a href="#">Store</a>
                	<ul>  
                		<li><a href="#">Online Shopping Center</a></li>
                    </ul>
                </li>
                <li><a href="#">Why Choose Us</a>
                	<ul>  
                		<li><a href="#">Customer Reviews</a></li>
                		<li><a href="#">Business Case Studies</a></li>
                    </ul>
                </li>
                <li><a href="#">Games</a>
                    <ul>  
                        <li><a href="#">BattleMechs</a></li>
                        <li><a href="#">Empire of the Galadur</a></li>
                        <li><a href="#">Airport Madness 2</a></li>
                    </ul>
                </li>  
            </ul>  
   </div>  
  
</body>  
</html>

Open in new window

0

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
samiam41Author Commented:
Thanks exalkonium:.  Testing your last suggestion now.  I found what I was trying to do!

http://www.cssplay.co.uk/menus/flyoutt.html

0
exalkoniumCommented:
Yup, seems flux0red. Try the one I just posted.
0
samiam41Author Commented:
I don't see any highlights (mouse over affects) now and menus overlap.
web.example.v1.2.JPG
0
exalkoniumCommented:
Funny, mine works perfect. What browser are you using, and are you copying and pasting my code entirely as is or just parts of it?
0
samiam41Author Commented:
:- )

I am copy/pasting your code straight into the html box.  Completely removing what ever was there prior and then putting in your suggested code.  Using IE8...  
0
samiam41Author Commented:
Heading out until I can work from home later this evening.  Thanks for all of your help.  I'm sure it isn't easy trying to figure out what my genius powers created.  lol!

0
samiam41Author Commented:
Great work as always!  It's been great working with you and appreciate your patience explaining what needs to go where and why.  

Take care,
Aaron
0
samiam41Author Commented:
I appreciate your help with the previous questions.  I ended up going back to the horizontal nav bar and submitted a new question on how to add gifs to the page options on the top level.  If you are interested, here is the link.  Thanks again.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_25787426.html?fromWizard=true
0
samiam41Author Commented:
Just posted a new question which should be a little easier then my previous ones.  If you get a chance, here it is.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_25789093.html
0
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.