Basic HTML/CSS
Posted: Thu Jan 15, 2015 2:51 am
Hey guys, I have a basic HTML/CSS question. I'm triyng to implement a dropdown nav bar, and I can't for the life of me get ANY OF THEM to work! Any help/ideas?
Code: Select all
<!DOCTYPE HTML>
<html>
<title> MAHS | Home</title>
<div id = "top"; div style = "position: relative; width: 75%; left: 12%; background-color: white; overflow: hidden";>
<!-- http://css-snippets.com/drop-down-navigation -->
<body class="news">
<div class="nav">
<ul>
<li class="home"><a href="#">MAHS TSA</a></li>
<li class="tutorials"><a href="#">TSA Archives</a>
<ul>
<li><a href="#">Tutorial #1@@</a></li>
<li><a href="#">Tutorial #2</a></li>
<li><a href="#">Tutorial #3</a></li>
</ul>
</li>
<li class="about"><a class="a" href="#">Curricula</a></li>
<li class="news"><a href="#">Resources</a>
<ul>
<li><a href="#">News #1</a></li>
<li><a href="#">News #2@@@</a></li>
<li><a href="#">News #3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</div>
<div id = "SLIDESHOW"; div style = "position: relative; width: 75%; left: 12%; height: 350px;">
<img src = "Wolf.jpg" style = "height: 350px; width: 100%;">
</div>
<div id = "CONTENT"; div style = "position: relative; width: 75%; left: 12%; border: 1px solid black; background-color: white;">
<div id = "SECONDARY"; div style = "position: relative; width: 100%; border: 1px solid black; background-color: white;"><font size = "5";>Monroe Area High School is a Title 1 school located in
Walton County; founded in DATE, Monroe Area has educated thousands of students and multiple generations. In recent years,
Monroe Area has made an effort to expand CTAE curricula and to encourage the creation of high school CTAE organizations</font></div>
<div id = "THIRD"; div style = "position: relative; width: 50%; left:50%; border: 1px solid black; background-color: white;"><font size = "5">Among multiple CTAE pathways, including the courses
Engineering 1 through 4, Monroe Area is host to a passionate and highly involved set of students in the high school level of the Technology Student
Association. The MAHS TSA chapter provides an environment in which students may strive and thrive, all whilst "learning to live in a technical world."</font></div>
</div>
<footer><center><div id = "FOOTER"; div style = "background-color: grey; width: 75%; margin-left: -10px; margin-top: 0px; border: 1px solid grey"><font color = "white">
<address>© Copyright 2015 All Rights Reserved Monroe Area High School TSA</address>
</center></font></footer>
</div>
</html>
</html>
<style type = "text/css">
body {
background-color: #240B3B;
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
.nav li:hover ul {
display: block;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
@media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
</style>