ドロップメニューを作るにあたって、わからないことができてきたので、質問させていただきます。
下の画像を見ていただくとわかると思いますが、カーソルを当てたとき、タブが丸い四角に仕様にするようにいたしました。
しかし、「what's new」の部分だけ丸にしようと思うのですが、下の4つのタブまで丸くなってしまいます。
これを改善するために試したこと。
・aタグにclassを付ける。
・.nav2 li:hover > aや、 li:hover > a などを指定。
なぜこのようなことが起きるかというと、ul,liリストの中に、ul,liリストがあるからであると思いました。
だから、aにclassを指定すれば、うまくいくかと思ったのですが、丸四角すらも反映しないようになってしまいました。
質問「what's new」の部分だけ丸にしたいのですが、どのようなコードを指定すればいいでしょうか?
この問題がお分かりになられる方、大変恐縮ですが、ご回答いただけると幸いです。
よろしくお願いします。
念のために、私のwebsiteのURLを記載させていただきます。
HTML
<ul class="nav2"> <li> <a href="#" class="tile"> <div class="new"> <span class="date2">what's new</span><br /> <span class="title2">新作商品から探す</span> </div> </a> <ul> <li><a href="#">ヴィヴァンローズリンク</a></li> <li><a href="#">エターナルムーンネックレス</a></li> <li><a href="#">ビンドゥピアス</a></li> <li><a href="#">エルフンブレスレット</a></li> </ul> </li> コード
.nav2 li ul li { overflow: hidden; height:0; transition:0.2s; width:100%; } .nav2 li ul li a { padding: 13px 15px; border-top: 1px solid #7ebbd9; background: #7ebbd9; text-align: left; white-space: nowrap; height:auto; } .nav2 li:hover > ul > li { overflow: visible; width:100%; height:auto; } .nav2 li:hover > a{ } li:hover > a { border-radius:25px; border:3px solid rgb(116, 151, 240); } a > .tile:hover{ } コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/09 13:00