diff options
| author | SkyArrow <tommy351@gmail.com> | 2012-01-24 18:14:46 +0100 |
|---|---|---|
| committer | SkyArrow <tommy351@gmail.com> | 2012-01-24 18:14:46 +0100 |
| commit | 4ab58d4e816bc5e998a936cc1ae5361f2dc46dfe (patch) | |
| tree | 47f80e5067ae5823aaae9a25562ca00d0ad9c55c /sass | |
| parent | 3780bd9f5f1978a85c1adb3a113f2eb0c6e8954b (diff) | |
| download | octopress-theme-jeyzu-4ab58d4e816bc5e998a936cc1ae5361f2dc46dfe.zip octopress-theme-jeyzu-4ab58d4e816bc5e998a936cc1ae5361f2dc46dfe.tar.gz | |
2-level menu
Diffstat (limited to 'sass')
| -rw-r--r-- | sass/base/_layout.scss | 4 | ||||
| -rw-r--r-- | sass/parts/_header.scss | 52 |
2 files changed, 52 insertions, 4 deletions
diff --git a/sass/base/_layout.scss b/sass/base/_layout.scss index 2f9586d..0ccdb0d 100644 --- a/sass/base/_layout.scss +++ b/sass/base/_layout.scss @@ -12,8 +12,8 @@ $max-width: 1000px; user-select: $select; } @mixin border-shadow($top: #fff, $bottom: #ddd){ - border-top: 1px solid #fff; - border-bottom: 1px solid #ddd; + border-top: 1px solid $top; + border-bottom: 1px solid $bottom; } *{ diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index 7c17a86..e792976 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -16,14 +16,62 @@ header{ } nav{ margin-left: 30px; - ul{ + >ul{ list-style: none; - li{ + padding-right: 30px; + >li{ float: left; margin-left: 50px; + position: relative; + >a{ + padding: 35px 30px 35px 0; + margin-top: -35px; + background: image-url('detail.png') right center no-repeat; + &:only-child{ + padding-right: 0; + background: none; + } + } } ul{ + position: absolute; + top: 60px; + left: 0; + z-index: 10; + white-space: nowrap; + background: #ddd; + border: 1px solid #ccc; + border-radius: 0 0 5px 5px; + box-shadow: 0 4px 8px #DDDDDD; + list-style: none; display: none; + li{ + @include border-shadow(#eee, #ccc); + &:hover{ + background: #d5d5d5; + } + &:first-of-type{ + border-top: none; + } + &:last-of-type{ + border-bottom: none; + } + a{ + display: block; + padding: 5px 15px; + width: 100%; + &:hover{ + color: #666; + } + } + } + } + li{ + &:hover{ + >ul{ + display: block; + } + } } } } |