Permalink
Browse files

Drop Down Code

  • Loading branch information...
1 parent e914dc3 commit e7fc3b61457fea2aa697456965a201f91ad30610 Lisa Catalano committed Dec 18, 2014
Showing with 78 additions and 9 deletions.
  1. +35 −3 dropdown.css
  2. +28 −3 ie.css
  3. +15 −3 index.html
View
@@ -16,14 +16,15 @@ body {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
- height: 40px;
- border-bottom: 1px solid #888;
+ text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
+ padding-left: 15px;
+ border-bottom: 1px solid #888;
transition: .3s background-color;
}
@@ -37,11 +38,15 @@ body {
cursor: default;
}
+/* Sub Menus */
+.nav li li {
+ font-size: .8em;
+}
/*******************************************
Style menu for larger screens
- Using 600px (130px each * 5 items), but ems
+ Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
@@ -55,4 +60,31 @@ body {
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;
+ }
}
View
@@ -11,9 +11,34 @@
border-bottom: none;
height: 50px;
line-height: 50px;
+ font-size: 1.4em;
+ display: inline-block;
+ margin-right: -4px;
}
-.nav li {
- display: inline-block;
- margin-left: -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;
}
View
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Simple Navigation</title>
+ <title>Drop Down Navigation</title>
<link rel="stylesheet" href="dropdown.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><link rel="stylesheet" href="./ie.css"><![endif]-->
@@ -14,9 +14,21 @@
<div class="nav">
<ul>
<li class="home"><a href="#">Home</a></li>
- <li class="tutorials"><a href="#">Tutorials</a></li>
+ <li class="tutorials"><a href="#">Tutorials</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="active" href="#">About</a></li>
- <li class="news"><a href="#">Newsletter</a></li>
+ <li class="news"><a href="#">Newsletter</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>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>

0 comments on commit e7fc3b6

Please sign in to comment.