相当苦戦したが。。。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | #header { position : relative ; height : 45px ; margin-bottom : 5px ; font-size : 14px ; } #header img { vertical-align : top ; } #header h 1 { float : left ; font-size : 20px ; width : 173px ; margin-top : 10px ; margin-bottom : 0px ; } #header #helpNav { position : absolute ; top : 0 ; right : 0 ; margin-right : 15px ; } #header #helpNav li { display : inline ; margin-left : 10px ; } #gNav { margin-top : 0px ; float : left ; width : 100% ; height : 45px ; background-color : #6a5acd ; } #gNav li.menu__single { position : relative ; display : inline ; float : left ; width : 105px ; height : 45px ; line-height : 45px ; padding-left : 15px ; padding-right : 15px ; background-color : #6a5acd ; } #gNav li.menu__single a { display : block ; color : #fff ; } #gNav li.menu__single a:hover { display : block ; color : #999 ; } li.menu__single ul.second_level{ display : none ; } li.menu__single:hover ul.second_level{ position : absolute ; display : inline ; top : 45px ; width : 110px ; padding-left : 10px ; padding-right : 10px ; background : #6a5acd ; visibility : visible ; opacity : 1 ; -webkit- transition : all . 2 s ease; transition : all . 2 s ease; } li.menu__single:hover ul.second_level li{ display : inline ; padding-left : 0px ; font-size : 12px ; } |
大体やりたいことは実装できた模様♪
さーコンテンツ作っていきますよ!