CSS Forum

**CSS4Life** · 10-03-2007, 02:29 PM

I'm doing a complete redesign of my site that I created in a WYSIWYG editor (whymhost.co.uk) and it used vertical drop down menus.

I want to create this effect using only CSS. I'm using XHTML 1.0 Strict as well.

I've read several things about this before but I cannot actually get it to work.

Hope someone can help

Dan

**Douglife** · 02:37 PM

I recommend this site. http://www.seoconsultants.com/css/menus/vertical/

If you'd like to post your code, I'm at work right now I could lend a hand.

**angele803** · 10-03-2007, 02:39 PM

Check out http://www.cssplay.co.uk/menus/
It has tons of css menus that you can tweak and fit into your layout.

**joder** · 10-03-2007, 02:41 PM

I have used these
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.alistapart.com/articles/dropdowns/

Here is a good list
http://www.alvit.de/css-showcase/css...s-showcase.php

**CSS4Life** · 10-03-2007, 03:00 PM

HTML Code:

div id="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">FAQ</a></li>
        <li><a href="">Support</a></li>
        <li><a href="">Login</a></li>
                  <li><a href="">cPanel</a></li>
                  <li><a href="">Webmail</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Legal</a></li>
    </ul>

This is my code at the moment. The CSS is below:

Code:

li ul {
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
  }

You can see all this at whymhost.co.uk/redesign/index.html

I'm not very good with CSS as you've probably guessed, and I'm trying to learn it. The redesign could take quite a while, and I've only just started.

By the way, thanks to people for posting those links - I took a look, but my CSS knowledge and when I changed the HTML and CSS, it didn't seem to work properly - whether that's me or whatever I'm not sure.

**Douglife** · 10-03-2007, 03:03 PM

What exactly is the problem you're having? I think it looks great btw!

**CSS4Life** · 10-03-2007, 03:47 PM

Quote:

Originally Posted by Douglife

What exactly is the problem you're having? I think it looks great btw!

Well if I add the code that I'm supposed to, it just doesn't seem to work.

I'm going to have another go at this - I also hate those extremely long complicated tutorials - they really put me off.

You think it looks great? The part I'm redesigning has hardly any formatting on at all! If you mean the main site, thanks, but I didn't do the design myself for that

**angele803** · 10-03-2007, 04:14 PM

Here is one that would be easy to customize:
http://www.cssplay.co.uk/menus/dd_valid.html

PS. The "position:absolute" was causing the <li> to stack on top of each other

**CSS4Life** · 10-03-2007, 04:53 PM

Stephanie, thanks for the link. I had a good look at that but the markup seems extremely long and I still can't work out quite what is needed and what isn't.

Can't someone just do the basic CSS for this for one of my links - I'm not getting it really

Sorry

**angele803** · 10-03-2007, 05:53 PM

Does this help?

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">

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}


</style>

</head>

<body>
<div class="menu">

<ul>
<li><a href="../menu/index.html">Link 1<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
	<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
	<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="../menu/index.html">Iink 2<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
	<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
	<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="../menu/index.html">Link 3<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
	<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
	<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>

	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
  
  
</ul>
</div>
</body>
</html>

I just modified one of the scripts from css play. Just add your links. If you are still having problems with it, let me know. I will try to put in your links for you.

**CSS4Life** · 10-03-2007, 06:07 PM

Thanks for that Stephanie. Yeh I'd prefer if you could put my links in (if it's not too much trouble). There seems to be lots and lots of extra markup that I wouldn't need - I simply want it like my own web site is right now really.

**angele803** · 06:21 PM

Better?

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">

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background:#949e7c;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}


</style>

</head>

<body>
<div class="menu">

<ul>
        <li><a href="">Home</a></li>
        <li><a href="">FAQ</a></li>
        <li><a href="">Support</a></li>
        <li><a href="">Login<!--[if IE 7]><!--></a><!--<![endif]-->
             <!--[if lte IE 6]><table><tr><td><![endif]-->
	         <ul>
	           <li><a href="#">cPanel</a></li>
	           <li><a href="">Webmail</a></li>
	     	</ul>
        </li>
        <li><a href="">Contact</a></li>
        <li><a href="">Legal</a></li>
</ul>

</div>
</body>
</html>

EDIT** I am not sure what the purpose of those conditional statements is. Maybe someone else can enlighten us???

**CSS4Life** · 10-03-2007, 06:20 PM

Great thanks

It seems to be working. I'll customize it all now, but thanks for this!