Need help with horizontal drop down CSS menu

S

SBMongoos

[H]ard|Gawd
Joined
Jul 22, 2001
Messages
1,134
I'm new to CSS and having some luck figuring it out but still find it a bit cryptic. I have some things I would really like to figure out. Hope someone can help.

Here's the link to view: Click here

  1. Create a 100% CSS shadow on the drop down menu so it stands out (found this but no idea how to use it: http://css.flepstudio.org/en/css3/box-shadow.html)
  2. The top item on the drop down looks too close to the top. Don't see a vertical center type of option.
  3. Need to get the nav menu to center as now it looks to far to the left
  4. Is there a way to drop the separator image on the far right side of the nav menu
  5. Lastly, I would much prefer not to have the code for the nav bar on every page but put that specific code in it's own html page and then reference it to load. So if I need to change the menu I don't have to edit 50 pages.

Thanks in advance!
 
Last edited:
1. Create a 100% CSS shadow on the drop down menu so it stands out (found this but no idea how to use it: http://css.flepstudio.org/en/css3/box-shadow.html)
Click to expand...
That's CSS3 stuff, the newest standard. It's not very widely supported at all. It probably would not mess up your site in a browser that doesn't support it though. The unrecognized code would probably just be ignored.
Do this for a shadow in the more modern browsers that do support it:
Code: 
	text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #26354A;
			color:#EBEEC8;
			text-decoration:none;
			}
	.menu li ul{
		background:#26354A;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:175px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
[COLOR="red"]box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;[/COLOR]
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {

2. The top item on the drop down looks too close to the top. Don't see a vertical center type of option.
Click to expand...
Add this bit highlighted in red -
Code: 
	float:none;
		margin:0px;
		padding:0px;
		width:175px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:25px;
[COLOR="Red"]line-height: 25px;[/COLOR]
		font-size:10px;
		font-style:bold;
		margin:0px;
		padding:0px 10px 0px 10px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#228b22;
			border:0px;
			color:#EBEEC8;
			text-decoration:none;
			}
3. Need to get the nav menu to center as now it looks to far to the left
Click to expand...
Some centered menu examples here - http://nopeople.com/design/CSS tips/index.html
4. Is there a way to drop the separator image on the far right side of the nav menu
Click to expand...
Add an id in your markup like this:
Code: 
                    <li><a href="code/scholarships.html" target="_self">SCHOLARSHIPS</a>
                    </li>
                    <li><a href="code/employment.html" target="_self">EMPLOYMENT</a>
                    </li>
                    <li><a href="code/summerfun.html" target="_self">SUMMER FUN</a>
                    </li>
                    <li><a href="code/news.html" target="_self" [COLOR="red"]id="nobg"[/COLOR]>NEWS</a>
                    </li>
                    </ul>
                    </div>
Then we can remove that background image with this line in your CSS:
Code: 
	}
	.menu li a{
		background:#E1D8B9 url("../images/seperator.gif") bottom right no-repeat;
		color:#228b22;
		display:block;
		font-weight:bold;
		line-height:16px;
		margin:0px;
		padding:0px 10px;
		text-align:center;
		text-decoration:none;
		}
[COLOR="red"]#nobg {background: none;}[/COLOR]
		.menu li a:hover, .menu ul li:hover a{
			background: #26354A;
			color:#EBEEC8;
			text-decoration:none;
			}

5. Lastly, I would much prefer not to have the code for the nav bar on every page but put that specific code in it's own html page and then reference it to load. So if I need to change the menu I don't have to edit 50 pages.
Click to expand...
You can do that with a server side like php. Have a look at this tutorial - http://www.tizag.com/phpT/include.php

______________________
and like I always say...
Use the right DocType
Validate your markup
Validate your CSS
Why validating is good
Why tables are bad
 
Some centered menu examples here - http://nopeople.com/design/CSS tips/index.html
Click to expand...

I added the "width: 100%;" to the proper CSS location:

.menu li a{
background:#E1D8B9 url("../images/seperator.gif") bottom right no-repeat;
color:#228b22;
display:block;
width: 100%;
font-weight:bold;
line-height:16px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}

So the nav links are now centered properly but now the vertical line seperators are messed up. Now only one shows just before News. So perhaps I need to remove the code you recommended below to get this to work or?

Add an id in your markup like this:
Code: 
                    <li><a href="code/scholarships.html" target="_self">SCHOLARSHIPS</a>
                    </li>
                    <li><a href="code/employment.html" target="_self">EMPLOYMENT</a>
                    </li>
                    <li><a href="code/summerfun.html" target="_self">SUMMER FUN</a>
                    </li>
                    <li><a href="code/news.html" target="_self" [COLOR="red"]id="nobg"[/COLOR]>NEWS</a>
                    </li>
                    </ul>
                    </div>
Then we can remove that background image with this line in your CSS:
Code: 
	}
	.menu li a{
		background:#E1D8B9 url("../images/seperator.gif") bottom right no-repeat;
		color:#228b22;
		display:block;
		font-weight:bold;
		line-height:16px;
		margin:0px;
		padding:0px 10px;
		text-align:center;
		text-decoration:none;
		}
[COLOR="red"]#nobg {background: none;}[/COLOR]
		.menu li a:hover, .menu ul li:hover a{
			background: #26354A;
			color:#EBEEC8;
			text-decoration:none;
			}


You can do that with a server side like php. Have a look at this tutorial - http://www.tizag.com/phpT/include.php
Click to expand...

The id="nobg" and "#nobg {background: none;}" tags seem to be having a negative effect on the mouse over for the News link. You get the dark blue on mouse over and the text turns white. On News now the text turns white but the blue mouse over does not come up like the rest of the nav links on the menu. I've uploaded it the same link. It may take some time to update. My web host must have issues. The current file is there but the browser isn't seeing it for some reason even though I've inserted a NO-CACHE tag. Here

On this I'd rather not use the PHP but perhaps JavaScript to plug into the Head then have it load in the spot where the Nav menu is to layout. Unless you feel PHP is a much better way to go. IE: JavaScript being blocked, etc.

Actually the idea came from here: http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

Scroll down to "Putting the Menu contents in an external file and fetched using Ajax"

If this works as is simple enough great. I'm open to ideas but want to keep it solid and simple.
 
Last edited:
Excavator said:
That's CSS3 stuff, the newest standard. It's not very widely supported at all. It probably would not mess up your site in a browser that doesn't support it though. The unrecognized code would probably just be ignored.
Do this for a shadow in the more modern browsers that do support it:
Code: 
	text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #26354A;
			color:#EBEEC8;
			text-decoration:none;
			}
	.menu li ul{
		background:#26354A;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:175px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
[COLOR="red"]box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;[/COLOR]
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {


Add this bit highlighted in red -
Code: 
	float:none;
		margin:0px;
		padding:0px;
		width:175px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:25px;
[COLOR="Red"]line-height: 25px;[/COLOR]
		font-size:10px;
		font-style:bold;
		margin:0px;
		padding:0px 10px 0px 10px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#228b22;
			border:0px;
			color:#EBEEC8;
			text-decoration:none;
			}

Some centered menu examples here - http://nopeople.com/design/CSS tips/index.html

Add an id in your markup like this:
Code: 
                    <li><a href="code/scholarships.html" target="_self">SCHOLARSHIPS</a>
                    </li>
                    <li><a href="code/employment.html" target="_self">EMPLOYMENT</a>
                    </li>
                    <li><a href="code/summerfun.html" target="_self">SUMMER FUN</a>
                    </li>
                    <li><a href="code/news.html" target="_self" [COLOR="red"]id="nobg"[/COLOR]>NEWS</a>
                    </li>
                    </ul>
                    </div>
Then we can remove that background image with this line in your CSS:
Code: 
	}
	.menu li a{
		background:#E1D8B9 url("../images/seperator.gif") bottom right no-repeat;
		color:#228b22;
		display:block;
		font-weight:bold;
		line-height:16px;
		margin:0px;
		padding:0px 10px;
		text-align:center;
		text-decoration:none;
		}
[COLOR="red"]#nobg {background: none;}[/COLOR]
		.menu li a:hover, .menu ul li:hover a{
			background: #26354A;
			color:#EBEEC8;
			text-decoration:none;
			}


You can do that with a server side like php. Have a look at this tutorial - http://www.tizag.com/phpT/include.php

______________________
and like I always say...
Use the right DocType
Validate your markup
Validate your CSS
Why validating is good
Why tables are bad
Click to expand...

bump - see my remarks above.. thanks
 
Any one else?

I found a .js file I can use to import the menu.html into the web pages. IE is throwing an error on it though.

Man..just looking for a simple but effective way to build a menu that I can point to and that looks good.
 
SBMongoos said:
The id="nobg" and "#nobg {background: none;}" tags seem to be having a negative effect on the mouse over for the News link. You get the dark blue on mouse over and the text turns white.
Click to expand...

In regards to the above, just changing #nobg from "background:" to "background-image:" should fix your issue.

Now, loading in the menu seperately. Use server-side. What was the point of making a CSS menu (all of which could have been done with javascript) just to load it in with javascript anyway (which yes - is possible).

And yes, ie. javascript is blocked. No menu, at all. Not very useful :)

Doesn't take much. The below would accomplish it and the user wouldn't notice a difference.

Code: 
<?php include("menu.html") ?>
 
Oneos said:
Doesn't take much. The below would accomplish it and the user wouldn't notice a difference.

Code: 
<?php include("menu.html") ?>
Click to expand...

I was trying this yesterday and could not get it to work. Which should I have enabled at the web host: php 4 or 5?

Does it need to be:

<div id="menu_html">
<?php include("menu.html") ?>
</div>

Also, any idea how to get the menu to center?
 
Last edited:
Well, in order for <?php ?> tags to work, the file they are written in (ie. your index.html) needs to have a file extension of ".php" (ie. index.php).

The php include will simply take the code in your menu.html (or whatever it may be called) and put it in place of the include. Just keep in mind when deciding what tags should be where.

As for centering it, there's a few ways it could go, depending what we're coding for.

One way we might be do is like this:

Code: 
HTML:
<div id="boxaroundmymenu">
    /*My menu here*/
</div>

CSS:
#boxaroundmymenu {
    width: 600px;
    margin:0 auto;
    }

The above is an example, I can't honestly say I've taken a look at the dimensions of yours or your code. In the case of margin: 0 auto;, it will set no vertical margins, and evenly space the horizontal margins on either side (in most browsers).

We could also go about it using text-align and such, Depends on what works for you.
 
Oneos said:
Well, in order for <?php ?> tags to work, the file they are written in (ie. your index.html) needs to have a file extension of ".php" (ie. index.php).

The php include will simply take the code in your menu.html (or whatever it may be called) and put it in place of the include. Just keep in mind when deciding what tags should be where.
Click to expand...

So every page I have should end in .php so it can load the menu? I've renamed the index.html to index.php and it works! Just not clear how to handle it on the other pages.
 
Oneos said:
As for centering it, there's a few ways it could go, depending what we're coding for.

One way we might be do is like this:

Code: 
HTML:
<div id="boxaroundmymenu">
    /*My menu here*/
</div>

CSS:
#boxaroundmymenu {
    width: 600px;
    margin:0 auto;
    }

The above is an example, I can't honestly say I've taken a look at the dimensions of yours or your code. In the case of margin: 0 auto;, it will set no vertical margins, and evenly space the horizontal margins on either side (in most browsers).

We could also go about it using text-align and such, Depends on what works for you.
Click to expand...

I found this in the CSS:

.menu li a{
background:#E1D8B9 url("../images/seperator.gif") bottom right no-repeat;
color:#228b22;
display:block;
font-weight:bold;
line-height:16px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}

Maybe I need to try your idea in this piece of code?
 
I intalled WAMP then tried Tomcat so I can load the PHP locally to test. But the pages are not loading. Is it a simple install of either app then load the page? Been a while since I worked with some of this.

Thanks...
 
Alright, I'm taking a look at your code now. First thing I notice that you're using tables, which are great, if you happen to be using them to make an actual table. I'd recommend switching away from that, but no biggy at the moment.


Another thing I've noticed, you seem to be including your style sheet twice, once in the head, and once with your menu. Stick to doing it at the top.

From what I see, this is how you have your menu structured:
Code: 
<div class="menu">
    <ul>
        <li><a href="">Link</a></li>
    </ul>
</div>

This div is also inside of a table row (which is a row of a table within a table cell :S). With this in mind, this should do the trick to center the menu within the table row:
Code: 
.menu {
    margin: 0 auto;
    }

And yes, unless you do other includes (which is what I'd end up reccomend doing, index.php contains your header, menu, footer, content container and you include the content for each page) you need to include the menu on every page and make every page that does so a .php extension.
 
Oneos said:
Alright, I'm taking a look at your code now. First thing I notice that you're using tables, which are great, if you happen to be using them to make an actual table. I'd recommend switching away from that, but no biggy at the moment.


Another thing I've noticed, you seem to be including your style sheet twice, once in the head, and once with your menu. Stick to doing it at the top.

From what I see, this is how you have your menu structured:
Code: 
<div class="menu">
    <ul>
        <li><a href="">Link</a></li>
    </ul>
</div>

This div is also inside of a table row (which is a row of a table within a table cell :S). With this in mind, this should do the trick to center the menu within the table row:
Code: 
.menu {
    margin: 0 auto;
    }

And yes, unless you do other includes (which is what I'd end up reccomend doing, index.php contains your header, menu, footer, content container and you include the content for each page) you need to include the menu on every page and make every page that does so a .php extension.
Click to expand...

I should have updated the link I've provided to see the code and site. Here's the link I've been using with the current files: Here.

Where do I plugin the following in the css file?

.menu {
margin: 0 auto;
}
 
It seems that placement of:

.menu {
margin: 0 auto;
}

isn't an issue. Either way (as I tried placing this code in what seemed to me as a proper place) it doesn't do anything for aligning the nav bar horizontally.
 
Okay, lets cheat then shall we?

How's it work for you if you try this:?

Code: 
.menu {
    text-align: center;
    }

.menu ul {
    text-align: left;
    }
 
Oneos said:
Okay, lets cheat then shall we?

How's it work for you if you try this:?

Code: 
.menu {
    text-align: center;
    }

.menu ul {
    text-align: left;
    }
Click to expand...

Maybe it's because we're "cheating" that it doesn't work?

Same results.
 
ok, trying change the text-align: left off and "ul" and to "li".

That should work, I even tested it.
 
Oneos said:
ok, trying change the text-align: left off and "ul" and to "li".

That should work, I even tested it.
Click to expand...

This isn't very clear to me. I'm very new to CSS. You want me to turn some things off or remove it from the CSS file?
 
I mistyped a bit there, what I meant was, instead of having the "text-align: left" as part of .menu ul, put it with .menu li
 
Oneos said:
I mistyped a bit there, what I meant was, instead of having the "text-align: left" as part of .menu ul, put it with .menu li
Click to expand...

Still no impact. Hmm... added it to the CSS like this:

.menu {
text-align: center;
}

.menu ul{
background:#E1D8B9;
height:16px;
list-style:none;
margin:0;
padding:0;
}
.menu li {
text-align: left;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#E1D8B9 url("../images/seperator.gif") bottom right no-repeat;
color:#228b22;
display:block;
font-weight:bold;
line-height:16px;
margin:0px;
padding:0px 10px;

text-decoration:none;
}
 
Last edited:
Oneos said:
Another thing I've noticed, you seem to be including your style sheet twice, once in the head, and once with your menu. Stick to doing it at the top.

From what I see, this is how you have your menu structured:
Code: 
<div class="menu">
    <ul>
        <li><a href="">Link</a></li>
    </ul>
</div>
Click to expand...

I removed the piece just above the PHP include but now when testing it in WAMP2 the page displays incorrectly. The bad thing is I did not note that code (the part that was the repeated code just above the PHP include).
 
Okay, looked at it again. Seems I missed giving you something.

The reason that last one didn't work, is because, in order to get your menu to appear horizontal, the list items were being floated to the left. This kinda negates any efforts of centering them.

So, in order to center them, we need to change the way we make it a horizontal menu. I'm going to choose to use the display type "inline-block", which will work on any modern browser (I believe).

Code: 
.menu {
    text-align: center;
    }

    .menu li {
        display: inline-block;    /* This line should REPLACE float: left; !! */
        }

Good luck bud.
 
Oneos said:
Okay, looked at it again. Seems I missed giving you something.

The reason that last one didn't work, is because, in order to get your menu to appear horizontal, the list items were being floated to the left. This kinda negates any efforts of centering them.

So, in order to center them, we need to change the way we make it a horizontal menu. I'm going to choose to use the display type "inline-block", which will work on any modern browser (I believe).

Code: 
.menu {
    text-align: center;
    }

    .menu li {
        display: inline-block;    /* This line should REPLACE float: left; !! */
        }

Good luck bud.
Click to expand...

I edited the CSS to look like this now:

.menu {
text-align: center;
}
.menu ul{
background:#E1D8B9;
height:16px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
display: inline-block;
padding:0px;
}

But it still does not work.

Edit... wait when I upload the updated CSS file the I'm not seeing the new CSS file. Odd, I'm using an FTP program and see it updating immediately there.
 
Would you mind zipping up the actual files and sending them over? Something is getting lost in translation here, because that worked on my test case (copied code from what you have online).
 
Oneos said:
Would you mind zipping up the actual files and sending them over? Something is getting lost in translation here, because that worked on my test case (copied code from what you have online).
Click to expand...

I'm working with web host now. I'm really loosing faith in Powweb. Been with them for years but for a while now I've had some issues that don't seem to get resolved or have an answer that makes sense. I rarely need support but for some reason we cannot seem to figure out this current issue when I'm working with web pages. I use FileZilla as my FTP tool. I can delete pages from the server and go back and still see them. As of now I've deleted that CSS file yet when you load that link it's loading info from that file and it's gone. Gotta be a cache server issue at there end. The FTP app shows the file gone. Works fine with other accounts I have with them.
 
I dropped it in a dev folder under another client to test. I can see the menu is now centered. However it's changed the size of the table above it where the image sits. There is now a gap on the far right of this image in FF. The image should fill the whole space. In IE the image looks correct but only Home shows up in the nav bar. In Chrome it's another issue. The image looks fine with no gaps and the menu is centered but the nav link News ends up in a second row and centered underneath all the others links.
 
Last edited:
Oneos said:
Would you mind zipping up the actual files and sending them over? Something is getting lost in translation here, because that worked on my test case (copied code from what you have online).
Click to expand...

You were right. This code did the trick:

.menu {
text-align: center;
}
.menu ul{
background:#E1D8B9;
height:16px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
display: inline-block;
padding:0px;
}

This created one thing I needed to fix (and finally found) but created another problem. Further down the CSS is:

.menu li a{
background:#E1D8B9 url("../images/seperator.gif") bottom right no-repeat;
color:#228b22;
display:block;
font-weight:bold;
line-height:16px;
margin:0px;
padding:0px 10px;
text-decoration:none;
}

The kicker was the the 10 in red above. Dropping this to 9 worked great. I check it cross browser and it looks fine (except for IE - at least v7). 10 was too wide and misaligned the tables creating a gap do to 10 being to large. However, in Internet Explorer there is a whole different problem. As I stated above only the nav link Home shows up in the nav bar as is centered in that whole horizontal nav bar. Must be an IE7 (or ?) issue. In doing a little research there may be an issue with the "inline" for IE. Do you think the "display: inline-block;" is the culprit?

Ideas on that?

Thanks for you're sticking with me on this.
 
Last edited:
anyone?

Is there a hack for IE7?

Also, I simply changed out one of the links on the nav bar. Locally the menu looks fine horizontally (not in IE7 of course) but when I upload it to the web to test in the dev folder it looks misaligned. I replaced "scholarships" with "admission" and for some reason on the web it shifts to the left instead of centering. Here's something odd. Now that it's misaligned it displays better in IE7. Before I made the change above the nav links were centered but in IE7 only one link displayed centered in that row. What the..

ARGHH!!!
 
Okay...I've almost got it.

I needed to add the IE7 hack to the .menu li :

zoom: 1;
*display:inline;

However it looks like there is some kind of padding difference. The menu now displays way better in IE7 but it does look a bit squeezed creating more of a gap on the left and right ends.

Click here to see it
 
bump

anyone? Could sure use some help on post #32 plus I'm seeing text corruption in the drop down menu under Curriculum in all but FF. The last two links at the bottom of the list.
 
You must log in or register to reply here.
Back
Top