Nesting div selector
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">© Copyright 2011, Thisisnotanid.</p>
</footer>
</body>
</html>
If you need any further information, I would be happy to assist!
Thisisnotanid
Junior Poster in Training
60 posts since Dec 2010
Reputation Points: 10
Solved Threads: 0
<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
Junior Poster in Training
60 posts since Dec 2010
Reputation Points: 10
Solved Threads: 0
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.
Thisisnotanid
Junior Poster in Training
60 posts since Dec 2010
Reputation Points: 10
Solved Threads: 0
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.
Thisisnotanid
Junior Poster in Training
60 posts since Dec 2010
Reputation Points: 10
Solved Threads: 0
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.
Thisisnotanid
Junior Poster in Training
60 posts since Dec 2010
Reputation Points: 10
Solved Threads: 0
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?
Thisisnotanid
Junior Poster in Training
60 posts since Dec 2010
Reputation Points: 10
Solved Threads: 0
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. :)
Thisisnotanid
Junior Poster in Training
60 posts since Dec 2010
Reputation Points: 10
Solved Threads: 0
