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

Question

clarkey 0 Newbie Poster

16 Years Ago

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

<div id="Nav">           <ul> 
    <li><a href="./Home.aspx">Home</a></li> 
        <li><a href="./Classes.aspx">Classes</a> 
      <ul> 
        <li><a href="./Adults.aspx">Adults</a></li> 
        <li><a href="./Kids.aspx">Kids</a></li> 
       </ul> </li>   
    
    <li><a href="./Timetable.aspx">Timetable</a> </li>  
    
    <li><a href="./Gallery.aspx">Gallery</a> 
        <ul> 
        <li><a href="./Videos.aspx">Videos</a></li> 
        <li><a href="./Photos.aspx">Photos</a></li> 
       </ul>  </li>  
    
    <li><a href="./About.aspx">About</a> </li>  
    <li><a href="./News.aspx">News & Events</a></li>  
    <li><a href="./Links.aspx">Links</a></li> 
    <li><a href="./Contact.aspx">Contact</a></li> 
        
      </ul>           </div>

CSS

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}

ul li {
	position: relative;
    top: 5px;
    left: 1px;
}

li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

ul li a {
	display: block;
	text-decoration: none;
	font-family:Arial;
	font-size:medium;
	font-weight:bold;
	color:White;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	background-color:Black;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}

li:hover ul { display: block; } 
 a:hover {
  border-bottom: 1px solid #960;
  background-color:Purple
}
            

startList  function() {
if :(document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for :(i=0; i:<navRoot.childNodes.length; i:++) {
node = navRoot.childNodes[i];
if :(node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this:className=this.className.replace»
	(" over", "");
   }
  
window.onload=startList;

li:hover ul, li.over ul { 
	display: block; color:Purple; }

ul id="nav"

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#NA
{POSITION:absolute;

html-css web-design

2 Contributors
2 Replies
102 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by clarkey

Dani AI

Generated 10 Months Ago

A quick, modern path from a vertical list to a horizontal drop‑down:

was on the right track — the top-level list needs to flow horizontally while each list item keeps relative positioning so its submenu can sit absolutely below it. The original thread also shows a broken script and an ID/case mismatch; fix the script and ensure any JavaScript looks for the exact element ID that exists in the HTML.

Recommended checklist before changing styles

Remove fixed width constraints on the outer list so it can size naturally.
Use a layout method that places the top-level items in a row (Flexbox is the simplest, robust choice today).
Keep each top-level li positioned (so submenus can be positioned relative to it) and keep submenus hidden by default, revealed either by hover/focus or by toggling a class for touch/JS support.
Add basic ARIA attributes and keyboard handling so the menu works for keyboard and screen‑reader users.
Drop obsolete browser hacks and debug any JavaScript errors shown in the browser console.

Minimal, practical patterns (example)

CSS: use a flex container for the top level; keep submenus absolutely positioned with top: 100% so they appear under their parent; use :focus-within or a toggled .open class to reveal submenus.
JS: add simple mouseenter/leave handlers to toggle .open and keep aria-expanded up to date; add a small keydown handler to support ArrowDown/Escape for submenu navigation.

If the menu still misbehaves: check the browser console for script errors, validate the HTML structure (missing closing tags or wrong element IDs often break scripts), and test in multiple browsers. For reference on layout and accessibility patterns see MDN on Flexbox and the WAI‑ARIA menu guidance: MDN Flexbox, WAI-ARIA Practices - Menus.

All 2 Replies

macneato 29 Posting Pro in Training

16 Years Ago

Hi,

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

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: auto;
}

ul li {
    position: relative;
    top: 5px;
    left: 1px;
	display: inline-block;
}

li ul {
    position: absolute;
    left: 0;
    top: 25px;
    display: none;
}

ul li a {
    display: block;
    text-decoration: none;
    font-family: Arial;
    font-size: medium;
    font-weight: bold;
    color: White;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: Black;
}

/* Fix IE. Hide from IE Mac \*/ * html ul li {
    float: left;
}* html ul li a {
    height: 1%;
}

/* End */

li:hover ul {
    display: block;
}

a:hover {
    border-bottom: 1px solid #960;
    background-color: Purple
}

startList
function() {

if:(document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for :(i=0; i:<navRoot.childNodes.length; i:++) {
node = navRoot.childNodes[i];
if :(node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this:className=this.className.replace»
	(" over", "");
   }
  
window.onload=startList;

li:hover ul, li.over ul { 
	display: block; color:Purple; }

ul id="nav"

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#NA
{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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

clarkey 0 Newbie Poster · Answer 1 · 2010-02-08T20:31:06+00:00

Hi,

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

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: auto;
}

ul li {
    position: relative;
    top: 5px;
    left: 1px;
	display: inline-block;
}

li ul {
    position: absolute;
    left: 0;
    top: 25px;
    display: none;
}

ul li a {
    display: block;
    text-decoration: none;
    font-family: Arial;
    font-size: medium;
    font-weight: bold;
    color: White;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: Black;
}

/* Fix IE. Hide from IE Mac \*/ * html ul li {
    float: left;
}* html ul li a {
    height: 1%;
}

/* End */

li:hover ul {
    display: block;
}

a:hover {
    border-bottom: 1px solid #960;
    background-color: Purple
}

startList
function() {

if:(document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for :(i=0; i:<navRoot.childNodes.length; i:++) {
node = navRoot.childNodes[i];
if :(node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this:className=this.className.replace»
	(" over", "");
   }
  
window.onload=startList;

li:hover ul, li.over ul { 
	display: block; color:Purple; }

ul id="nav"

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#NA
{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....

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

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers