###前提・実現したいこと
はじめまして。smartyを使ったテンプレートを使って、ECサイト構築を目指しています。
html,cssを使い始めて3週間ほどの超初心者なのですが、困っていますので、どなたか助けてください!
ちなみにレンタルカートのサーバーのサポート(掲示板など)では回答が得られませんでした。
http://shop.duomo-pen.com/
こちらのページのグローバルメニューの、サブメニューをドロップダウンにしたく、こちらを参考にしてつくっています。「お問合せ」以外はすべてドロップダウンにしたいのです。
###発生している問題・エラーメッセージ
http://shop.duomo-pen.com/
このように、
- サブメニューが崩れてしまいます。
- サブメニューにホバーのカラーが適用されていません。
###該当のソースコード
html <ul id="gnavi" class="gnavi gnavi__section section__block col col-lg-12 row"> <li class="gnavi__unit col<{if $manager_url != ""}> col-lg-3 w--23per<{else}> col-lg-4 w--31per<{/if}>"> <a href="<{$home_url}>" class="gnavi__link">HOME<span class="section__suffix gnavi__suffix">ホーム</span></a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li class="gnavi__unit col col-lg-3 w--23per"> <a href="" class="gnavi__link">ABOUT US<span class="section__suffix gnavi__suffix">イル・ドゥオモについて</span></a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <{if $manager_url != ""}> <li class="gnavi__unit col col-lg-3 w--23per"> <a href="http://duomo-pen.com/" class="gnavi__link">MAGAZINE<span class="section__suffix gnavi__suffix">マガジン</span></a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <{/if}> <li class="gnavi__unit col<{if $manager_url != ""}> col-lg-3 w--23per<{else}> col-lg-4 w--31per<{/if}>"> <a href="<{$view_inq_url}>" class="gnavi__link">CONTACT US<span class="section__suffix gnavi__suffix">お問い合わせ</span></a> </li> </ul> CSS /* global navigation */ .gnavi { position: absolute; bottom: -40px; z-index: 10; } .gnavi__unit { margin: 0 1%; height: 100%; width:%; padding: 0; border: 6px double #000; background: #ffffff; text-align: center; font-size: 1.14286em; } .gnavi__link { padding: 10px; height: 100%; width:100%; display: block; } .gnavi__link:hover { color: #ffffff; background: #333333; } .gnavi__suffix { display: block; } /* global navigation :tuika*/ #gnavi li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #gnavi li ul li{ overflow: hidden; width: 100%; height: 0; color: #fff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #gnavi li ul li a{ padding:0; background: #fffffd; text-align: center; font-size: 14px; font-weight:bold; } #gnavi li:hover ul li{ overflow: visible; color: #ffffff; height: 0; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #gnavi li:hover ul li:first-child{ border-top: 0; } #gnavi li:hover ul li:last-child{ border-bottom: 0; } #gnavi li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; }
###試したこと
この部分のpaddingを100%にしてみたり、いろいろいじってみましたが、うまくいきませんでした。
#gnavi li ul li a{
padding:0;
background: #fffffd;
text-align: center;
font-size: 14px;
font-weight:bold;
###補足情報(言語/FW/ツール等のバージョンなど)
カラーミーショップを使っているので、smartyの独自タグが含まれています。
以上、お分かりになる方があればご教授ください。おねがいします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/21 06:28