Basic CSS horizontal drop down menu

fishcuisine · December 14, 2010

Hello,

There is site that has a horizontal menu that looks good.

Link: http://css.flepstudio.org/en/css-tutorials/horizontal-drop-down-menu.html

I pasted the first set of codes on to my DW MX new file page. It looked good as advertised:

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

Then I tried the other set of codes but I ended up getting the codes reproduced on the page. Clearly, I did not have the codes placed correctly.

Any ideas I wonder?

#menu{

padding:0;

margin:0;

}

#menu ul{

padding:0;

margin:0;

}

#menu li{

position: relative;

float: left;

list-style: none;

margin: 0;

padding:0;

}

#menu li a{

width:100px;

height: 30px;

display: block;

text-decoration:none;

text-align: center;

line-height: 30px;

background-color: black;

color: white;

}

#menu li a:hover{

background-color: red;

}

#menu ul ul{

position: absolute;

top: 30px;

visibility: hidden;

}

Regards

rk

Wickham · December 14, 2010

The first set of code should be in the page body section, but the second set beginning #menu{ padding:0; margin:0;} should be in a separate stylesheet or in head section style tags like

<style type="text/css">
(all the code here)
</style>

Have you put it all in the body section?

If you want to choose a menu, there are lots at cssplay

http://www.cssplay.co.uk/menus/

Andrea · December 14, 2010

How about a link to the page you're talking about so we can see what you really have - and often, it's not just the part you might think, it could be something somewhere else on the page that affects it.

fishcuisine · December 15, 2010

Hello,

Thanks for your reply.

I tried the following format. Same ole same.

No change...I know I missed something.

Regards

fish

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

#menu{

padding:0;

margin:0;

}

#menu ul{

padding:0;

margin:0;

}

#menu li{

position: relative;

float: left;

list-style: none;

margin: 0;

padding:0;

}

#menu li a{

width:100px;

height: 30px;

display: block;

text-decoration:none;

text-align: center;

line-height: 30px;

background-color: black;

color: white;

}

#menu li a:hover{

background-color: red;

}

#menu ul ul{

position: absolute;

top: 30px;

visibility: hidden;

}

</style>

Wickham · December 15, 2010

That's still not right. You should have something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta name="keywords" content="Wickham">                
<meta name="description" content="Test items">            
<meta http-equiv="content-type" content="text/html;  charset=utf-8">

<title>Test</title>                  

<style type="text/css">
#menu{
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;


float: left;
list-style: none;
margin: 0;
padding:0;
}
#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
#menu li a:hover{
background-color: red;
}
#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
}

</style> 

</head>
<body>

<div id="menu">
<ul>
<li><a href="#nogo">Link 1</a>
<ul>
<li><a href="#nogo">Link 1-1</a></li>
<li><a href="#nogo">Link 1-2</a></li>
<li><a href="#nogo">Link 1-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 2</a>
<ul>
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 3</a>
<ul>
<li><a href="#nogo">Link 3-1</a></li>
<li><a href="#nogo">Link 3-2</a></li>
<li><a href="#nogo">Link 3-3</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

BeeDev · December 15, 2010

http://www.w3schools.com

Good place to start.

Andrea · December 15, 2010

No change...I know I missed something.

Yes, based on our experience, that would be about 95% of all the advice you've been getting here.

If you did as I asked in my last post in this thread and posted a link to the page you're struggling with, we could see EXACTLY what you're working with and tell you specifically how it could be fixed.

fishcuisine · December 16, 2010

That's still not right. You should have something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"        "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta name="keywords" content="Wickham">                
<meta name="description" content="Test items">            
<meta http-equiv="content-type" content="text/html;  charset=utf-8">

<title>Test</title>                  

<style type="text/css">
#menu{
padding:0;
margin:0;
}
#menu ul{
padding:0;
margin:0;
}
#menu li{
position: relative;


float: left;
list-style: none;
margin: 0;
padding:0;
}
#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
#menu li a:hover{
background-color: red;
}
#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
}

</style> 

</head>
<body>

<div id="menu">
<ul>
<li><a href="#nogo">Link 1</a>
<ul>
<li><a href="#nogo">Link 1-1</a></li>
<li><a href="#nogo">Link 1-2</a></li>
<li><a href="#nogo">Link 1-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 2</a>
<ul>
<li><a href="#nogo">Link 2-1</a></li>
<li><a href="#nogo">Link 2-2</a></li>
<li><a href="#nogo">Link 2-3</a></li>
</ul>
</li>
<li><a href="#nogo">Link 3</a>
<ul>
<li><a href="#nogo">Link 3-1</a></li>
<li><a href="#nogo">Link 3-2</a></li>
<li><a href="#nogo">Link 3-3</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

fishcuisine · December 16, 2010

Hello,

Re: CSS Horizontal Menu Link - http://css.flepstudi...-down-menu.html'>http://css.flepstudi...-down-menu.html

I'm back. Would you believe...

I trust you already know that I am still in T-Ball league, so please bear with me.

I went with your latest code sequence; pasted it into my DW MX new page.

What I saw was a great improvement.

Link 1 Link 2 Link 3 were all in their proper black rectangles.

How do I now have each link (Link 1 Link 2 Link 3) light up in red or any other color and display the drop down menu, i.e. 1-1, 1-2, 1-3 etc.

Regards

Link: http://css.flepstudi...-down-menu.html

falkencreative · December 16, 2010

Based on the code you have shown so far, it looks like you need to add

#menu ul li:hover ul{

visibility:visible;

}

to your css -- within the <style type=text/css">...</style>. Place it just before the </style>.

Andrea · December 16, 2010

Re: CSS Horizontal Menu Link - http://css.flepstudi...-down-menu.html

Link: http://css.flepstudi...-down-menu.html

That link isn't working - but I did not mean the link to where you got the code from, but a link to YOUR page - the one you're working on. Just upload it to your site and let us look.

fishcuisine · December 17, 2010

Hello there,

Again, thanks for sticking this one out.

As everyone knows I am still a T-Ball leaguer.

All I have been doing is cut and paste.

I checked the result of the codes below on my DW MX new page.

The result is no change. Same as last time.

I really don't have a clue why...

I get the a rectangular black box with Link 1 Link 2 Link 3 wording in white letters.

No red; no drop down. When I click on the wording I see a thin white verticle line about 1-2 mm wide.

Confused fish...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

#menu{

padding:0;

margin:0;

}

#menu ul{

padding:0;

margin:0;

}

#menu li{

position: relative;

float: left;

list-style: none;

margin: 0;

padding:0;

}

#menu li a{

width:100px;

height: 30px;

display: block;

text-decoration:none;

text-align: center;

line-height: 30px;

background-color: black;

color: white;

}

#menu li a:hover{

background-color: red;

}

#menu ul ul{

position: absolute;

top: 30px;

visibility: hidden;

}

</style>

</head>

<body>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

fishcuisine · December 17, 2010

GUYS!

Actually, the last two code sequences will work.

What I did not do was check the codes with my browser with an F12 move.

Well...when I did that I saw what was actually written in code.

I believe I can move forward!

Tnks

Fishy T-Ball Leaguer

Sign In

Basic CSS horizontal drop down menu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation