From d69421b4053ba500bf6bdb578c2e4c7381a638f4 Mon Sep 17 00:00:00 2001 From: Monika Eftimova Date: Sat, 4 Oct 2014 12:59:50 +0300 Subject: [PATCH] Add styles for the main nav's dropdown menu --- css/styles.css | 52 ++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 44 insertions(+), 8 deletions(-) diff --git a/css/styles.css b/css/styles.css index e15bb73..e0375c2 100644 --- a/css/styles.css +++ b/css/styles.css @@ -235,16 +235,17 @@ nav ul { margin: 0; padding: 0; } -nav ul > li { +nav ul li { + position: relative; +} + +nav .menu > li { float: left; margin: 0; padding: 0; } -nav ul a { - color: #000; - text-decoration: none; - display: block; - padding: 1.5em 0.4em; + +nav .menu > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -252,9 +253,40 @@ nav ul a { -webkit-transition: border-top 200ms; border-top: 0 solid #FFF; } -nav ul a:hover { + +nav .menu > li:hover { border-top: 0.4em solid #A8D6FF; } + +nav ul a { + color: #000; + text-decoration: none; + display: block; + padding: 1.5em 0.4em; +} + +nav ul .sub-menu { + display: none; + position: absolute; + background: #fff; + width: 200px; + left: 50%; + margin-left: -100px; + box-shadow: 0 3px 5px -3px #000 +} + +nav ul li:hover .sub-menu { + display: block; + position: absolute; +} + +nav ul .sub-menu li, +nav ul .sub-menu li a { display: block; width: 100%; } + +nav ul .sub-menu li a { padding: 1em 0; text-align: center; } + +nav ul .sub-menu li { border-bottom: 1px solid #ccc; } + nav ul .separator { display: block; width: 0.05em; @@ -424,6 +456,10 @@ footer { background: #ddd; } +#copyright { + text-align: center; +} + /* Sub navigation */ .subnav { margin-top: 1.6em; @@ -491,4 +527,4 @@ footer { .sponsors-item .col2 > img { display: inline-block; margin: 0 0 2em 0; -} \ No newline at end of file +}