Nesting div selector

Question

Thisisnotanid 0 Junior Poster in Training

13 Years Ago

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!

html-css web-design

Edited 13 Years Ago by Thisisnotanid because: Remove extraneous <span /> tag.

2 Contributors
12 Replies
262 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Thisisnotanid

Arkinder 93 Posting Pro in Training

13 Years Ago

<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

Arkinder 93 Posting Pro in Training

13 Years Ago

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

Reply to this topic

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.

Thisisnotanid 0 Junior Poster in Training · Answer 1 · 2011-08-08T04:47:26+00:00

<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

Thisisnotanid 0 Junior Poster in Training · Answer 2 · 2011-08-08T05:02:24+00:00

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.

Arkinder 93 Posting Pro in Training · Answer 3 · 2011-08-08T05:06:29+00:00

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

Thisisnotanid 0 Junior Poster in Training · Answer 4 · 2011-08-08T05:18:30+00:00

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.

Arkinder 93 Posting Pro in Training · Answer 5 · 2011-08-08T05:36:03+00:00

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

Thisisnotanid 0 Junior Poster in Training · Answer 6 · 2011-08-08T05:40:10+00:00

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.

Arkinder 93 Posting Pro in Training · Answer 7 · 2011-08-08T05:57:18+00:00

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

Regards
Arkinder

Thisisnotanid 0 Junior Poster in Training · Answer 8 · 2011-08-08T22:13:33+00:00

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?

Arkinder 93 Posting Pro in Training · Answer 9 · 2011-08-08T22:22:24+00:00

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

Thisisnotanid 0 Junior Poster in Training · Answer 10 · 2011-08-09T00:56:32+00:00

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. :)