WordPressの「writr」というテーマを使っています。
メニューをホバーすると子メニューや孫メニューが表示されるのですが、【現状】では表示されるときに上に空間が空いてしまいます。
これを、【希望】のようにびっしりと空間のない表示にしたいです。
下記に【現状】のCSSを貼り付けておきましたので、どこを訂正すればいいか、お分かりになる方いらっしゃいませんでしょうか?
CSS
1/* =Menu 2----------------------------------------------- */ 3 4.main-navigation { 5 display: block; 6 position: relative; 7 float: left; 8 width: 300px; 9 padding: 0 0 35px; 10 margin: 0 -40px 20px; 11 font-weight: bold; 12 text-transform: uppercase; 13} 14.main-navigation:after { 15 content: ''; 16 display: block; 17 position: absolute; 18 left: 40px; 19 bottom: 0; 20 width: 220px; 21 border-bottom: 15px double #16a085; 22} 23.main-navigation ul { 24 list-style: none; 25 margin: 0px 0px 0px 0px; 26 padding-left: 0; 27} 28.main-navigation li { 29 position: relative; 30} 31.main-navigation a { 32 display: block; 33 position: relative; 34 padding: 10px 40px; 35 text-decoration: none; 36 color: #fff !important; 37} 38.main-navigation a:hover { 39 background: #16a085; 40} 41.main-navigation ul ul { 42 display: none; 43 opacity: 0; 44 z-index: 9998; 45 float: left; 46 position: absolute; 47 top: 0; 48 left: 100%; 49 width: 300px; 50 background: #1abc9c; 51} 52.main-navigation ul ul li:last-child { 53 border-bottom: none; 54} 55.main-navigation .dropdown > a { 56 padding-right: 65px; 57} 58.main-navigation .dropdown > a:after { 59 content: ''; 60 display: block; 61 position: absolute; 62 top: 50%; 63 right: 40px; 64 margin-top: -5px; 65 border-left: 5px solid #fff; 66 border-top: 5px solid transparent; 67 border-bottom: 5px solid transparent; 68} 69.main-navigation ul > li:hover > ul { 70 display: block; 71 opacity: 1; 72 -webkit-animation: menuFadeIn 0.25s; 73 -moz-animation: menuFadeIn 0.25s; 74 -ms-animation: menuFadeIn 0.25s; 75 -o-animation: menuFadeIn 0.25s; 76 animation: menuFadeIn 0.25s; 77} 78.main-navigation li.current_page_item > a, 79.main-navigation li.current-menu-item > a { 80 background: #303030 !important; 81}
どうも該当する部分のCSSがないみたいなんです。
それらしき部分の
.main-navigation ul > li:hover > ul {
というところに
margin
を指定しても、「元メニューの位置」に対するmarginの数値しか変化せず、「画面上下一杯に」はならないんです…(´;ω;`)
これはひょっとして、、
子メニューや孫メニューにPHPからidをつけて、そのidでCSSを指定しなければならないのでしょうか?
追記です。
上述の【希望】サイトはこちらです。
http://switch-box.net/free-cute-desktop-icons.html
もしこのテーマがDLできるサイトなどがわかれば、私の疑問は解決できるので、助かります。(>_<)
テーマ名は「swich-box-20]というみたいなのですが、どうやらWordpress本体では検索しても出ないようなんです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/06/09 23:18