Line 12: | Line 12: | ||
<style> | <style> | ||
/*Strip the ul of padding and list styling*/ | /*Strip the ul of padding and list styling*/ | ||
− | ul { | + | #windowcontent ul { |
list-style-type:none; | list-style-type:none; | ||
margin:0; | margin:0; | ||
Line 19: | Line 19: | ||
} | } | ||
/*Create a horizontal list with spacing*/ | /*Create a horizontal list with spacing*/ | ||
− | li { | + | #windowcontent li { |
display:inline-block; | display:inline-block; | ||
float: left; | float: left; | ||
Line 26: | Line 26: | ||
/*Style for menu links*/ | /*Style for menu links*/ | ||
− | li a { | + | #windowcontent li a { |
display:block; | display:block; | ||
min-width:140px; | min-width:140px; | ||
Line 38: | Line 38: | ||
} | } | ||
/*Hover state for top level links*/ | /*Hover state for top level links*/ | ||
− | li:hover a { | + | #windowcontent li:hover a { |
background: #19c589; | background: #19c589; | ||
} | } | ||
/*Style for dropdown links*/ | /*Style for dropdown links*/ | ||
− | li:hover ul a { | + | #windowcontent li:hover ul a { |
background: #f3f3f3; | background: #f3f3f3; | ||
color: #2f3036; | color: #2f3036; | ||
Line 49: | Line 49: | ||
} | } | ||
/*Hover state for dropdown links*/ | /*Hover state for dropdown links*/ | ||
− | li:hover ul a:hover { | + | #windowcontent li:hover ul a:hover { |
background: #19c589; | background: #19c589; | ||
color: #fff; | color: #fff; | ||
Line 55: | Line 55: | ||
/*Hide dropdown links until they are needed*/ | /*Hide dropdown links until they are needed*/ | ||
− | li ul { | + | #windowcontent li ul { |
display: none; | display: none; | ||
} | } | ||
/*Make dropdown links vertical*/ | /*Make dropdown links vertical*/ | ||
− | li ul li { | + | #windowcontent li ul li { |
display: block; | display: block; | ||
float: none; | float: none; | ||
} | } | ||
/*Prevent text wrapping*/ | /*Prevent text wrapping*/ | ||
− | li ul li a { | + | #windowcontent li ul li a { |
width: auto; | width: auto; | ||
min-width: 100px; | min-width: 100px; | ||
Line 70: | Line 70: | ||
} | } | ||
/*Display the dropdown on hover*/ | /*Display the dropdown on hover*/ | ||
− | ul li a:hover + .hidden, .hidden:hover { | + | #windowcontent ul li a:hover + .hidden, #windowcontent .hidden:hover { |
display: block; | display: block; | ||
} | } | ||
+ | |||
+ | /*Responsive Styles*/ | ||
+ | @media screen and (max-width : 760px){ | ||
+ | /*Make dropdown links appear inline*/ | ||
+ | #windowcontent ul { | ||
+ | position: static; | ||
+ | display: none; | ||
+ | } | ||
+ | /*Create vertical spacing*/ | ||
+ | #windowcontent li { | ||
+ | margin-bottom: 1px; | ||
+ | } | ||
+ | /*Make all menu links full width*/ | ||
+ | #windowcontent ul li, #windowcontent li a { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
Revision as of 22:01, 1 November 2017