CSS - Centralize Ultimate Horizontal Drop-down Menu Demo On Div

Hi all!

I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to.
The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up

You can check out the site at:
cleopatra.gebodesign.no

The files are at:
gebodesign.no/cleopatra/menu.php
gebodesign.no/cleopatra/stylesheet.css

Thanks for any input

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html



The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

hello. I am currently using a simple horizontal top menu with a vertical drop down. I would like to change the vertical drop down to be horizontal, multi column, and should accomodate more than one line, if possible. The example I'm going for is used as top navigation he
nfl - baltimore ravens home page
and he
ge home page

Here is the code I'm using currently (would like it to be all CSS).
####

ul#mainNavigation
{
padding-left:185px;
}
ul#mainNavigation li
{
padding:0 16px;
float: left;
display:inline;
position: relative;
list-style: none;
color:White;
_width:1px;
}
ul#mainNavigation li.Seperator
{
padding:0px;
_width:1px;
}
ul#mainNavigation li.over
{
background-color:white;
}
ul#mainNavigation li.over a
{
color:Red;
}
ul#mainNavigation li a
{
color:White;
text-transform:uppercase;
text-decoration:none;
font-weight:bold;
display:block;
}
ul#mainNavigation a:hover {
color: Red;
}
ul#mainNavigation li a
{
display: block;
}
ul#mainNavigation li p
{
height:19px;
}
ul#mainNavigation li ul
{
display: none;
position: absolute;
background-color:Black;
opacity:.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
margin-left:-16px;
}
ul#mainNavigation li.over ul
{
display: block;
z-index:999;
}

ul#mainNavigation li.over ul li
{
float: none;
background:none;
border:none;
white-space:nowrap;
padding:0px;
}
ul#mainNavigation li.over ul li a
{
color: white;
padding:5px;
border-bottom:solid 1px black;
}

ul#mainNavigation li.over ul li a:hover
{
background: #3d1f6e;
color: white;
}
~~~~~~~ HTML ~~~~~~~~~~~~~~

<ul id="mainNavigation">

<li>
<p><a href="Mainlink1.html">Mainlink1</a></p>
<ul>
<li><a href="link2.html">LINK 2</a></li>
<li><a href="link3.html">LINK 3</a></li>
<li><a href="link4.html">LINK 4</a></li>
<li><a href="link5.html">LINK 5</a></li>
<li><a href="link6.html">LINK 6</a></li>
<li><a href="link7.html">LINK 7</a></li>
</ul>
</li>

<li>
<p><a href="Mainlink2.html">Mainlink2</a></p>
<ul>
<li><a href="link2.html">LINK 2</a></li>
<li><a href="link3.html">LINK 3</a></li>
<li><a href="link4.html">LINK 4</a></li>
<li><a href="link5.html">LINK 5</a></li>
<li><a href="link6.html">LINK 6</a></li>
<li><a href="link7.html">LINK 7</a></li>
</ul>
</li>
</ul>

####
Thank you, in advance!
~ lahddah

Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css.

Here they are below.

drop_down.js:
Code:

// JavaScript Document

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; 

HTML:
Code:

<!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">
@import "style2.css";
</style>
</head>
<body> 
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</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> 

Style2.CSS:
Code:

body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	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;
	border-bottom: 0;
	}

/* 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 */ 

For my horizontal drop-down menu, the menu items that overlap the content disappear for some reason in IE7. Here is the link... sweetless.zxq.net

I am an absolute newbie to CSS, so I'm not sure if I am missing something really simple?

-S

Hi

I am following a list aparts suckerfish dropdown tutorial. So far I have managed to get everything working for Mozilla.

The javascript bit at the end, enabling it to work for explorer is troubling me. can anyone help?

Do I put the javascript in the CSS file or the Html? I've tried both but neither seem to work!

Is there a better way to do this?

Thanks

Hi there,
I have not done any html/CSS in a LONG time and have just got back into it.
I am having some problems with a drop down, where, when the sub menu is hovered over, it will not go away again until the mouse is moved either up above the menu bar or off the browser page. I would like the sub menu to be hidden when the mouse is off the sub menu item.

An example is here (oops, I can't post a URL)
Code:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-image: url(images/carpet.gif);
	width:100%;
	margin: 0px;
}

#wrapper {
	position: relative;
	margin: auto;
	width:840px;
	top: 20px;
	height: 920px;
}


#index3-03_ {
	position:absolute;
	left:5px;
	top:45px;
	width:840px;
	height:263px;
	background-image: url(images/thinslice.png);
	background-repeat: no-repeat;
	z-index: 2;
	background-position: -66px -142px;
}

#navbar {
	position: absolute;
	top: 31px;
	right: 0px;
	margin: 0;
	padding: 0;
	width: 780px;
	left: 38px;
	height: 37px;
}
#navbar li {
	list-style: none;
	float: left;
	padding-left: 20px;
	font-size: 14px;
}
#navbar li a {
   
   display: block;
	text-decoration: none;
	list-style-type: none;
	list-style: unordered;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 5px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-decoration: none;
	color: #363795;
	text-align: center;
   }
#navbar li a:hover {
	color: #B00D46;
}

#navbar li ul {
   display: none;  }

#navbar li:hover ul, #navbar li.hover ul {
	position:absolute;
	display: block;
	left:-42px;
	top:-1px;
	width:840px;
	margin: 0;
	background-repeat: no-repeat;
	float: left;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	z-index: 5;
	clear: none;
	background-image: url(images/fatslice.png);
	background-position: -62px -281px;
	height: 500px;
}

#navbar li:hover li, #navbar li.hover li {
	float: left;
	padding-left: 25px;
	padding-bottom: 25px;
}
#navbar li:hover li a, #navbar li.hover li a {
	color: #363795;
	position: relative;
	left: 125px;
	top: 25px;
}
#navbar li li a:hover {
	color: #B00D46;
	text-align: left;
	position: relative;
	left: 125px;
	top: 25px;
}


#foobar1 {
	position: absolute;
	left: 62px;
	top: 1px;
	clear: both;
}

#foobar2 {
	position: absolute;
	left: 149px;
	top: 1px;
	clear: both;
}
#foobar3 {
	position: absolute;
	left: 32px;
	top: 1px;
	clear: both;
}

-->
</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="index3-03_">
      <ul id="navbar"><li><a href="index.html" target="_self">HOME</a></li>
        <li><a href="usage.html" target="_self">THIS IS BROKEN</a>
          <ul>
            <span id="foobar1"><a href="index.html" target="_self">HOME</a></span>
            <span id="foobar2"><a href="usage.html" target="_self">THIS IS BROKEN</a></span>
            <span id="foobar3"><a href="faq.html" target="_self">FAQ's</a></span>
            <li><a href="parents.html" target="_self">PARENTS</a></li>
            
          </ul>
        </li>
        <li> <a href="faq.html" target="_self">FAQ's</a></li>
      </ul>
    </div>
</body>
</html>

any help would be much appreciated

I am trying to build a table in which the center scrolls both ways but the columns and rows around the edges stay put - have a look at the page below using IE6 to see what I mean:

(URL address blocked: See forum rules)

This is working exactly as I want it to in IE6, my problem is that I can't get it to work right in IE7 - the horizontal scrolling is not working properly.
By re-instating the commented out code on line 81 I can get it to sort of work, but I don't want to have to specify the width like this as the table contents are going to be dynamic and there is no way of knowing how wide they will be.

This is for use on a company intranet where all the users have IE6 or IE7, hence I am not concerned with other browsers or earlier versions of IE.

Any help getting this working would be much appreciated...

P

I'm not sure if the title describes exactly what I mean, but here it goes.

I'm working on this website: http://denartcc.org/d/

The menu along the top has images that change position when you hover over them. The thing that I'm trying to do is create something that looks like this site's menu: http://www.aopa.org/ Notice how hovering over one of the menu items reveals another blue bar that contains more links. This is what I'm trying to create.

Unfortunately I'm stuck when it comes to comparing these side-by-side, and I just don't know how to create that secondary set of links. The code I'm using is below.

CSS:
Code:

#amenu {
	list-style: none;
	padding: 0;
	margin:auto 0 0 0;
	width: 930px;
	height: 30px;
	background-color: black;
	position: relative;
	border-bottom:medium solid white;
	float:left;
}
#amenu ul  {
	display: none;
	position: absolute;
}

#amenu ul li {
	}

#amenu li a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}

.home {
	width: 120px;
	height: 30px;
	background: url(../images/menu/home.png) no-repeat;
	left: 20px;
	top: 0px;
}

.airspace {
	width: 163px;
	height: 30px;
	background: url(../images/menu/airspace.png) no-repeat;
	left:160px;
	top:0;
}

.community {
	width: 174px;
	height: 30px;
	background: url(../images/menu/community.png) no-repeat;
	left:343px;
	top:0;
}

.controllers {
	width: 195px;
	height: 30px;
	background: url(../images/menu/controllers.png) no-repeat;
	left:537px;
	top:0;
}

.pilots {
	width: 174px;
	height: 30px;
	background: url(../images/menu/pilots.png) no-repeat;
	left:752px;
	top:0;
}

#amenu a:hover {
	background-position: left bottom;
}

#amenu a:hover span{
	display: block;
}

HTML
Code:

<div>
		<ul id="amenu">
			<li><a href="#" class="home">Home<span></span></a></li>
			<li>
			<a href="#" class="airspace">Airspace<span></span></a>
				<ul>
				<li>ZDV Airports</li>
				<li>Preferred Routing</li>
				<li>Try Something New</li>
				</ul>
			</li>
			<li><a href="#" class="community">Community<span></span></a></li>
			<li><a href="#" class="controllers">Controllers<span></span></a></li>
			<li><a href="#" class="pilots">Pilots<span></span></a></li>
		</ul>
	</div>

Hi,

I have the following menu that is currently laid out with a table:

http://www.ianarmstrong.com/menutest/

I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image.

I need a way to handle the 5 different images, and have a mouseover effect as well.

Could someone offer some direction on this problem?

Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item?

what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu

i looked at these and could find one

http://www.cssdrive.com/index.php/menudesigns/category/C20/

I am trying to create a navigation menu for a page using images i have sliced in photoshop and I now need to put the images all on a 900px wide line and link them to the appropiate pages.

When i put the images next to each other i end up with a gap. The only way I have found to solve the problem is to leave the img src all on the same line. I'm sure this isn't the best way to do it and it is throwing out the div below.

Ideas anyone?

Code:

Code:
Original - Code <div id="nav"> <img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" /> </div>

  
<div id="nav">
<img id="home" src="images/menu/home.gif" alt="" /><img id="about" src="images/menu/about.gif" alt="" /><img id="wedding" src="images/menu/wedding.gif" alt="" /><img id="corporate" src="images/menu/corporate.gif" alt="" /><img id="occasions" src="images/menu/occasions.gif" alt="" /><img id="contact" src="images/menu/contact.gif" alt="" />
    </div>

Jake

I've tried the tutorials on CSS menus but can't seem to get it to work right for my project.

I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help?


The code is below:

Code:

  <tr>
          
    <td width="766">
       <div id="navcontainer">        
          <ul>
          <li><a href="">Home</a></li>
          <li><a href=""> Project Status</a></li>
          <li><a href=""> Tasks</a></li>
          <li><a href="">General Information</a></li>
          <li><a href="">Completed Tasks</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
        </ul>
    </div>

CSS

Code:

   body,html {
   margin: 0;

}

#navcontainer ul {
	list-style-type: none;
	text-align: center;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;


}

#navcontainer ul li {
	display: inline;


}

#navcontainer ul li a {
	text-decoration: none;
	padding: 0.2em 1em;
	color: #fff;
	background-image: url(images/back.gif);
	height: 24px;
	line-height: 23px;

}

#navcontainer ul li a:hover {
	color: #fff;
	background-color: #960033;
	background-attachment: fixed;
	background-repeat: repeat;
	background-position: center;
	background-image: url(images/backover.gif);


}

---