Styling ordered lists

2 files changed, 28 insertions, 18 deletions

diff --git a/menu.css b/menu.css
index 393f617..51d777c 100644
--- a/menu.css
+++ b/menu.css
@@ -1,3 +1,8 @@
+nav {
+  position: relative;
+  z-index: 1;
+}
+
 nav > ul {
   width: 900px;
   display: table;
@@ -38,8 +43,8 @@ nav li {
 }
 
 nav li:before {
-  content: "";
-  margin-left: 0px;
+  content: "" !important;
+  margin-left: 0px !important;
 }
 
 nav a {
diff --git a/style.css b/style.css
index 9aaedda..a2143e8 100644
--- a/style.css
+++ b/style.css
@@ -62,27 +62,18 @@ img {
 
 ul {
   margin-bottom: 30px;
+  counter-reset: list;
 }
 
 ol {
   margin-bottom: 30px;
+  counter-reset: list;
 }
 
-ul ul {
-  margin-bottom: 0px;
-}
-
-ul ol {
-  margin-bottom: 0px;
-}
-
-ol ul {
-  margin-bottom: 0px;
-}
-
-ol ol {
-  margin-bottom: 0px;
-}
+ul ul { margin-bottom: 0px; }
+ul ol { margin-bottom: 0px; }
+ol ul { margin-bottom: 0px; }
+ol ol { margin-bottom: 0px; }
 
 li {
   margin-left: 30px;
@@ -91,7 +82,7 @@ li {
   text-align: justify;
 }
 
-li:before {
+ul > li:before {
   content: "•";
   color: #F52F8A;
   position: relative;
@@ -100,6 +91,20 @@ li:before {
   font-size: 18px;
 }
 
+ol li {
+  counter-increment: list;
+  position: relative;
+}
+
+ol > li:before {
+  content: counter(list) ".";
+  color: #F52F8A;
+  position: absolute;
+  left: -2.5em;
+  width: 2em;
+  text-align: right;
+}
+
 a {
   text-decoration: none;
   color: darkblue;