Solved

CSS menu... simple change...

Posted on 2011-03-02
2
192 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
2 Comments
 
LVL 12

Assisted Solution

by:Amick
Amick earned 250 total points
Comment Utility
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 250 total points
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

771 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now