?
Solved

CSS menu... simple change...

Posted on 2011-03-02
2
Medium Priority
?
198 Views
Last Modified: 2012-05-11
Hi all,
Can anyone help me change this menu from being vertical, with the submenus appearing on the side, to being horizontal with them appearing under each item?

Ive tinkered with the display: inline, but that always seems to break it....


http://www.gainexperience.com/dev103/


0
Comment
Question by:fox_statton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 12

Assisted Solution

by:Amick
Amick earned 1000 total points
ID: 35024544
I moved the style inside the page, but you can easily move it back to the .css file.  You probably want to do a compare and finish the styling, but this is enough to give you the idea.
<!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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@charset "utf-8";
/* CSS Document */


body {
	font: normal 11px verdana;
	}



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

ul li {

	position: relative;
	width: 150px; /* Width of Menu Items */
	display:inline-block;
	float:left;
	}

li ul {
	position: absolute;
	left: 0; /* Set 1px less than menu width */
	top: 25px;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	}

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

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
</style>
</head>

<body>
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">People</a>
    <ul>
      <li><a href="#">John</a></li>
      <li><a href="#">Dave</a></li>
      <li><a href="#">Micha</a></li>
      <li><a href="#">Bosh</a></li>
    </ul>
  </li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Internet Marketing</a></li>
      <li><a href="#">Hosting</a></li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a>
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

Open in new window

0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 1000 total points
ID: 35024564
The CSS:
/* Navigation */
a {
text-decoration: none;
list-style: none;
color: #ccc;
}
.nav{
margin-left : 10%;
margin-top : 25px;
position : relative;
width : 62%;
padding : 0;
border-bottom: 1px solid #ccc;
}
ul #nav {
top : 0;
padding : 0;
line-height : 100%;
width : 90%;
}
ul#nav li {
margin : 0 2px;
letter-spacing : -0.05em;
padding : 0 0 8px;
float : left;
position : relative;
list-style : none;
}
ul#nav a {
text-decoration : none;
display : block;
padding : 8px 20px;
margin : 0;
}
ul#nav a:hover {
color: #E2144A; 
background: #f9f9f9;
}
ul#nav .current a, ul li:hover > a {
color: #E2144A; 
background: #f9f9f9;
}
ul#nav ul li:hover a, ul li:hover li a {
color: #E2144A; 
background: #f9f9f9;
}
ul#nav ul a:hover {
color: #E2144A; 
background: #f9f9f9;
}
ul#nav ul {
background : #ddd;
display : none;
margin : 0;
padding : 0;
width : 200px;
position : absolute;
top : 35px;
left : 0;
border : 1px solid #b4b4b4;
}
ul#nav li:hover > ul {
display : block;
color: #E2144A; 
background: #f9f9f9;
}
ul#nav ul li {
float : none;
margin : 0;
padding : 0;
}
ul#nav ul a {
font-weight : normal;
}
ul ul ul {
left : 200px;
top : -3px;
}
ul#nav:after {
content : ".";
display : block;
display: none;
line-height : 0;
height : 0;
}
ul#nav {
display : inline-block;
}
html[xmlns] ul {
display : block;
}
* html ul#nav {
height : 1%;
}
ul#nav:after {
content : ".";
display : block;
display: none;
line-height : 0;
height : 0;
}
ul#nav {
display : inline-block;
}
html[xmlns] ul {
display : block;
}
* html ul {
height : 1%;
}

Open in new window


The HTML:

<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">People</a> 
    <ul> 
      <li><a href="#">John</a></li> 
      <li><a href="#">Dave</a></li> 
      <li><a href="#">Micha</a></li> 
      <li><a href="#">Bosh</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul> 

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question