Hi all, I've just started learning CSS and HTML to develop websites as a hobby. I was experimenting with what I'm learning and have hit a block (excuse the pun). I'm trying to create a drop-down menu using CSS and HTML alone. In the following I try to assign what happens to div with class "dropdown" when a div with class"menu" is hovered over. Maybe I'm just making a newbie mistake, I don't know, but I'd really appreciate any help on this. Thanks! Here's the CSS:

body {
background-image: url(Pattern1.gif);
font-size: 12pt;
font-family: Caviar Dreams;
font-weight: inherit;
background-position: left center;
text-decoration: none;
background-attachment: scroll;
  color: darkgreen;
z-index: -1;
padding-top:120px;

}
a:link {
text-decoration: none;
font-size: 14pt;
}
a.menu {

padding-right: 20px;
font-size: 90%;
-moz-transition:font-size .25s;
-webkit-transition:font-size .25s;
}

a.menu:hover {
font-size: 100%;
-moz-transition:font-size .25s;
-webkit-transition:font-size .25s;
}
a:active {
color: #686868;
text-decoration: none;
font-size: 14pt;
}
a:visited {
color: #993300;
text-decoration: none;
font-size: 14pt;
}
a:hover {
color: white;
text-decoration: none;
font-size: 14pt;
}
table {
background-image: url(menu.png);
z-index: -2;
width: 100%;
}
ul {

text-align: center;
font-size: 180%;
font-family: OptimusPrinceps;
line-height: 30pt;
margin-bottom:2px;
}
li {
display: inline;
}
h1 {
color: #5D9961;
line-height: 35px;
}

header {
  position:fixed;
  background-image:url(menu.png);
  background-repeat:repeat;
  margin-top:-142px;
  margin-left:-8px;
  width:100%;
  z-index:1;
}
footer {

  position:relative;
  bottom:-1000px;
  background-image:url(menu.png);
  background-repeat:repeat-x;
  margin-left:-8px;
  width:100%;
}
p.copyright {
  text-align:right;
  font-size:100%;
  font-family:OptimusPrinceps;
  color:white;
}

div.menu {
height:35px;
width:80px;
padding-left:10px;
padding-right:12px;
padding-bottom:5px;
margin-left:-5px;
color:green;
margin-bottom:-20px;
display:inline;
}

div.menu a {
color:green;
}

div.menu:hover {

background:black;
opacity:.8;
}
div.menu:hover a{
color:grey;
}

div.dropdown {
position:absolute;
width:500px;
height:200px;
background:black;
margin-top:0px;
margin-left:275px;
display:none;
}

div.menu:hover div.dropdown{
display:block;
}

And here's the HTML:

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

<head>

<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>thisisnotanid</title>

<link rel="stylesheet" type="text/css" href="style.css">
</link>
</head>

<body>
<header>

<h1>elegance</h1>
<ul>
<li><div class="menu"><a href="#">Item 1</a></div></li>
<li><div class="menu"><a href="#">Item 2</a></div></li>
<li><div class="menu"><a href="#">Item 3</a></div></li>
<li><div class="menu"><a href="#">Item 4</a></div></li>
<li><div class="menu"><a href="#">Item 5</a></div></li>
</ul>
<div class="dropdown">Hi</div>
</header>

<footer>
<p class="copyright">&copy Copyright 2011, Thisisnotanid.</p>
</footer>
</body>
</html>

If you need any further information, I would be happy to assist!

<footer>

Is not an HTML tag. Try using a division instead.

<div id="footer">
</div>

Then, in your CSS.

#footer {
/* CSS properties */
}

<header> doesn't exist either. Fix those and then we'll work on the drop down menu.

Regards
Arkinder

<footer>

Is not an HTML tag. Try using a division instead.

<div id="footer">
</div>

Then, in your CSS.

#footer {
/* CSS properties */
}

<header> doesn't exist either. Fix those and then we'll work on the drop down menu.

Regards
Arkinder

They're included in the HTML5 spec. I should've listed my !DOCTYPE to indicate HTML5 spec, but I think that part of the code is still correct.

http://www.w3.org/TR/html-markup/header.html

http://dev.w3.org/html5/markup/footer.html

Oh, okay. You had an HTML 4.01 transitional doctype. It may be possible a different way with CSS3 - not sure.

Place the drop down inside of any of the divisions with a class of menu. This will also allow you to have a different drop down for each menu item.

<ul>
<li><div class="menu"><a href="#">Item 1</a><div class="dropdown">Hi</div></div></li>
<li><div class="menu"><a href="#">Item 2</a></div></li>
<li><div class="menu"><a href="#">Item 3</a></div></li>
<li><div class="menu"><a href="#">Item 4</a></div></li>
<li><div class="menu"><a href="#">Item 5</a></div></li>
</ul>

Regards
Arkinder

Oh, okay. You had an HTML 4.01 transitional doctype. It may be possible a different way with CSS3 - not sure.

Place the drop down inside of any of the divisions with a class of menu. This will also allow you to have a different drop down for each menu item.

<ul>
<li><div class="menu"><a href="#">Item 1</a><div class="dropdown">Hi</div></div></li>
<li><div class="menu"><a href="#">Item 2</a></div></li>
<li><div class="menu"><a href="#">Item 3</a></div></li>
<li><div class="menu"><a href="#">Item 4</a></div></li>
<li><div class="menu"><a href="#">Item 5</a></div></li>
</ul>

Regards
Arkinder

That totally worked! Thank you! Can you explain why what I had before wasn't working? I'm still confused as to what's happening behind the scenes. Is it possible to affect the behaviour of certain elements when other elements are interacted with? Or was my nesting just wrong? Thanks again.

Sure :)

div.menu:hover div.dropdown{
    display:block;
}

In this CSS rule you're stating that div.dropdown is a descendant of div.menu . But in your original markup, it wasn't. Let me know if you'd like more explanation.

Edit:

Is it possible to affect the behaviour of certain elements when other elements are interacted with?

Yes and no. Yes, when the element is a descendant of the element with the pseudo-class hover. No, the rest of the time. This may change with CSS3. But you can use JavaScript to have one element manipulate any element you want.

Regards
Arkinder

I see. So, is there any way of nesting elements without declaring them as descendants of some other? It seems this could prove to be rather inconvenient in certain situations.

Edit 2: Okay, it's possible, but is very limiting. Not to mention just a bad way to do something. So I stand by my original statement - JavaScript is very flexible in these cases.

<div id="foo">
<ul>
<li><div class="menu"><a href="#">Item 1</a></div></li>
<li><div class="menu"><a href="#">Item 2</a></div></li>
<li><div class="menu"><a href="#">Item 3</a></div></li>
<li><div class="menu"><a href="#">Item 4</a></div></li>
<li><div class="menu"><a href="#">Item 5</a></div></li>
</ul>
<div class="dropdown">Hi</div>
</div>
#foo {
    width: 32%;
    margin: 0 auto;
}

div:hover div[class="dropdown"] {
    display: block;
}

Once again, I don't recommend this.

Regards
Arkinder

Edit: One second...

Regards
Arkinder

Thanks! I still have to learn JavaScript though, haha. Maybe I'll use Python instead since I already know it.


Edit: Just saw your updated message.

Updated again, I should have just made a new message lol.

Regards
Arkinder

Edit 2: Okay, it's possible, but is very limiting. Not to mention just a bad way to do something. So I stand by my original statement - JavaScript is very flexible in these cases.

<div id="foo">
<ul>
<li><div class="menu"><a href="#">Item 1</a></div></li>
<li><div class="menu"><a href="#">Item 2</a></div></li>
<li><div class="menu"><a href="#">Item 3</a></div></li>
<li><div class="menu"><a href="#">Item 4</a></div></li>
<li><div class="menu"><a href="#">Item 5</a></div></li>
</ul>
<div class="dropdown">Hi</div>
</div>
#foo {
    width: 32%;
    margin: 0 auto;
}

div:hover div[class="dropdown"] {
    display: block;
}

Once again, I don't recommend this.

Regards
Arkinder

If I understand correctly, does the above mean that if any div on the page is hovered over, the div(s) with class "dropdown" will then be displayed as blocks?

Also, is it possible to have the following:

/* Same CSS as yours except: */

#foo div:hover div[class="dropdown"] {
    display: block;
}

with the same markup and have it produce the effect I originally described?

If I understand correctly, does the above mean that if any div on the page is hovered over, the div(s) with class "dropdown" will then be displayed as blocks?

That's it exactly it, and one of the reasons it's a bad technique. :)

Also, is it possible to have the following:

/* Same CSS as yours except: */

#foo div:hover div[class="dropdown"] {
    display: block;
}

with the same markup and have it produce the effect I originally described?

In theory it should, you'll just have to test it and see.

Regards
Arkinder

That's it exactly it, and one of the reasons it's a bad technique. :)


In theory it should, you'll just have to test it and see.

Regards
Arkinder

Cool. Thanks for all your help! I appreciate it. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.