943,155 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > How to change verticle drop down menu to horizontal drop down menu
Ad:
Permalink
Feb 7th, 2010
0

How to change verticle drop down menu to horizontal drop down menu

Expand Post »
Hi I have created a navigation for me friends website and it works fine as a vertical meun, but I really want it to be horizontal, can anybody please help me fix this. I have submitted all the HTML and CSS below.

Thanks

HTML Code
HTML and CSS Syntax (Toggle Plain Text)
  1. <div id="Nav">           <ul> 
  2.     <li><a href="./Home.aspx">Home</a></li> 
  3.         <li><a href="./Classes.aspx">Classes</a> 
  4.       <ul> 
  5.         <li><a href="./Adults.aspx">Adults</a></li> 
  6.         <li><a href="./Kids.aspx">Kids</a></li> 
  7.        </ul> </li>   
  8.  
  9.     <li><a href="./Timetable.aspx">Timetable</a> </li>  
  10.  
  11.     <li><a href="./Gallery.aspx">Gallery</a> 
  12.         <ul> 
  13.         <li><a href="./Videos.aspx">Videos</a></li> 
  14.         <li><a href="./Photos.aspx">Photos</a></li> 
  15.        </ul>  </li>  
  16.  
  17.     <li><a href="./About.aspx">About</a> </li>  
  18.     <li><a href="./News.aspx">News & Events</a></li>  
  19.     <li><a href="./Links.aspx">Links</a></li> 
  20.     <li><a href="./Contact.aspx">Contact</a></li> 
  21.  
  22.       </ul>           </div>

CSS
HTML and CSS Syntax (Toggle Plain Text)
  1. ul {
  2. 	margin: 0;
  3. 	padding: 0;
  4. 	list-style: none;
  5. 	width: 150px;
  6. 	}
  7.  
  8. ul li {
  9. 	position: relative;
  10.     top: 5px;
  11.     left: 1px;
  12. }
  13.  
  14. li ul {
  15. 	position: absolute;
  16. 	left: 149px;
  17. 	top: 0;
  18. 	display: none;
  19. 	}
  20.  
  21. ul li a {
  22. 	display: block;
  23. 	text-decoration: none;
  24. 	font-family:Arial;
  25. 	font-size:medium;
  26. 	font-weight:bold;
  27. 	color:White;
  28. 	background: #fff;
  29. 	padding: 5px;
  30. 	border: 1px solid #ccc;
  31. 	background-color:Black;
  32. 	}
  33.  
  34. /* Fix IE. Hide from IE Mac \*/
  35. * html ul li { float: left; }
  36. * html ul li a { height: 1%; }
  37. /* End */
  38.  
  39. ul {
  40. 	margin: 0;
  41. 	padding: 0;
  42. 	list-style: none;
  43. 	width: 150px;
  44. 	border-bottom: 1px solid #ccc;
  45. 	}
  46.  
  47. li:hover ul { display: block; } 
  48.  a:hover {
  49.   border-bottom: 1px solid #960;
  50.   background-color:Purple
  51. }
  52.  
  53.  
  54. startList  function() {
  55. if :(document.all&&document.getElementById) {
  56. navRoot = document.getElementById("nav");
  57. for :(i=0; i:<navRoot.childNodes.length; i:++) {
  58. node = navRoot.childNodes[i];
  59. if :(node.nodeName=="LI") {
  60. node.onmouseover=function() {
  61. this.className+=" over";
  62.   }
  63.   node.onmouseout=function() {
  64.   this:className=this.className.replace»
  65. 	(" over", "");
  66.    }
  67.  
  68. window.onload=startList;
  69.  
  70. li:hover ul, li.over ul { 
  71. 	display: block; color:Purple; }
  72.  
  73. ul id="nav"
  74.  
  75. /* Fix IE. Hide from IE Mac \*/
  76. * html ul li { float: left; height: 1%; }
  77. * html ul li a { height: 1%; }
  78. /* End */
  79.  
  80. #NA
  81. {POSITION:absolute;
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
clarkey is offline Offline
2 posts
since Feb 2010
Permalink
Feb 8th, 2010
0
Re: How to change verticle drop down menu to horizontal drop down menu
Hi,

This is an easy one, change your CSS to the following;

CSS Syntax (Toggle Plain Text)
  1. ul {
  2.     margin: 0;
  3.     padding: 0;
  4.     list-style: none;
  5.     width: auto;
  6. }
  7.  
  8. ul li {
  9.     position: relative;
  10.     top: 5px;
  11.     left: 1px;
  12. 	display: inline-block;
  13. }
  14.  
  15. li ul {
  16.     position: absolute;
  17.     left: 0;
  18.     top: 25px;
  19.     display: none;
  20. }
  21.  
  22. ul li a {
  23.     display: block;
  24.     text-decoration: none;
  25.     font-family: Arial;
  26.     font-size: medium;
  27.     font-weight: bold;
  28.     color: White;
  29.     background: #fff;
  30.     padding: 5px;
  31.     border: 1px solid #ccc;
  32.     background-color: Black;
  33. }
  34.  
  35. /* Fix IE. Hide from IE Mac \*/ * html ul li {
  36.     float: left;
  37. }* html ul li a {
  38.     height: 1%;
  39. }
  40.  
  41. /* End */
  42.  
  43. li:hover ul {
  44.     display: block;
  45. }
  46.  
  47. a:hover {
  48.     border-bottom: 1px solid #960;
  49.     background-color: Purple
  50. }
  51.  
  52. startList
  53. function() {
  54.  
  55. if:(document.all&&document.getElementById) {
  56. navRoot = document.getElementById("nav");
  57. for :(i=0; i:<navRoot.childNodes.length; i:++) {
  58. node = navRoot.childNodes[i];
  59. if :(node.nodeName=="LI") {
  60. node.onmouseover=function() {
  61. this.className+=" over";
  62.   }
  63.   node.onmouseout=function() {
  64.   this:className=this.className.replace»
  65. 	(" over", "");
  66.    }
  67.  
  68. window.onload=startList;
  69.  
  70. li:hover ul, li.over ul { 
  71. 	display: block; color:Purple; }
  72.  
  73. ul id="nav"
  74.  
  75. /* Fix IE. Hide from IE Mac \*/
  76. * html ul li { float: left; height: 1%; }
  77. * html ul li a { height: 1%; }
  78. /* End */
  79.  
  80. #NA
  81. {POSITION:absolute;}

Like to be honest with you, im not too sure what you doing with all those horrible hacks but what floats your boat
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007
Permalink
Feb 8th, 2010
0
Re: How to change verticle drop down menu to horizontal drop down menu
Click to Expand / Collapse  Quote originally posted by macneato ...
Hi,

This is an easy one, change your CSS to the following;

CSS Syntax (Toggle Plain Text)
  1. ul {
  2.     margin: 0;
  3.     padding: 0;
  4.     list-style: none;
  5.     width: auto;
  6. }
  7.  
  8. ul li {
  9.     position: relative;
  10.     top: 5px;
  11.     left: 1px;
  12. 	display: inline-block;
  13. }
  14.  
  15. li ul {
  16.     position: absolute;
  17.     left: 0;
  18.     top: 25px;
  19.     display: none;
  20. }
  21.  
  22. ul li a {
  23.     display: block;
  24.     text-decoration: none;
  25.     font-family: Arial;
  26.     font-size: medium;
  27.     font-weight: bold;
  28.     color: White;
  29.     background: #fff;
  30.     padding: 5px;
  31.     border: 1px solid #ccc;
  32.     background-color: Black;
  33. }
  34.  
  35. /* Fix IE. Hide from IE Mac \*/ * html ul li {
  36.     float: left;
  37. }* html ul li a {
  38.     height: 1%;
  39. }
  40.  
  41. /* End */
  42.  
  43. li:hover ul {
  44.     display: block;
  45. }
  46.  
  47. a:hover {
  48.     border-bottom: 1px solid #960;
  49.     background-color: Purple
  50. }
  51.  
  52. startList
  53. function() {
  54.  
  55. if:(document.all&&document.getElementById) {
  56. navRoot = document.getElementById("nav");
  57. for :(i=0; i:<navRoot.childNodes.length; i:++) {
  58. node = navRoot.childNodes[i];
  59. if :(node.nodeName=="LI") {
  60. node.onmouseover=function() {
  61. this.className+=" over";
  62.   }
  63.   node.onmouseout=function() {
  64.   this:className=this.className.replace»
  65. 	(" over", "");
  66.    }
  67.  
  68. window.onload=startList;
  69.  
  70. li:hover ul, li.over ul { 
  71. 	display: block; color:Purple; }
  72.  
  73. ul id="nav"
  74.  
  75. /* Fix IE. Hide from IE Mac \*/
  76. * html ul li { float: left; height: 1%; }
  77. * html ul li a { height: 1%; }
  78. /* End */
  79.  
  80. #NA
  81. {POSITION:absolute;}

Like to be honest with you, im not too sure what you doing with all those horrible hacks but what floats your boat
Hiya,

Thanks ever so much for helping me out. I don't know what you mean by hacks, I got this code from somebody else but would more than welcome any recommendations you have to improve the code. I am a beginner at this web stuff malarky....
Reputation Points: 10
Solved Threads: 0
Newbie Poster
clarkey is offline Offline
2 posts
since Feb 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Getting a DIV to stretch 100% - Problems when scrolling
Next Thread in HTML and CSS Forum Timeline: Help with a jumping page





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC