ドロップダウンメニューの中のCSS指定

ドロップメニューを作るにあたって、わからないことができてきたので、質問させていただきます。

下の画像を見ていただくとわかると思いますが、カーソルを当てたとき、タブが丸い四角に仕様にするようにいたしました。

しかし、「what's new」の部分だけ丸にしようと思うのですが、下の4つのタブまで丸くなってしまいます。

これを改善するために試したこと。
・aタグにclassを付ける。

・.nav2 li:hover > aや、 li:hover > a などを指定。

なぜこのようなことが起きるかというと、ul,liリストの中に、ul,liリストがあるからであると思いました。
だから、aにclassを指定すれば、うまくいくかと思ったのですが、丸四角すらも反映しないようになってしまいました。

質問「what's new」の部分だけ丸にしたいのですが、どのようなコードを指定すればいいでしょうか？

この問題がお分かりになられる方、大変恐縮ですが、ご回答いただけると幸いです。

よろしくお願いします。

念のために、私のwebsiteのURLを記載させていただきます。

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件

ベストアンサー

以下のようにするとどうでしょうか？

HTML
1<ul class="nav2">
2    <li>
3        <a href="#" class="tile menu">
4            <div class="new">
5                <span class="date2">what's new</span><br>
6                <span class="title2">新作商品から探す</span>
7            </div>
8        </a>
9        <ul>
10            <li><a href="#">ヴィヴァンローズリンク</a></li>
11            <li><a href="#">エターナルムーンネックレス</a></li>
12            <li><a href="#">ビンドゥピアス</a></li>
13            <li><a href="#">エルフンブレスレット</a></li>
14        </ul>
15    </li>
16
17    <li>
18        <a href="#" class="menu">
19            <div class="design">
20                <span class="date2">design</span><br>
21                <span class="title2">デザインの特徴から探す</span>
22            </div>
23        </a>
24        <ul>
25            <li><a href="#">ヴィヴァンローズリンク</a></li>
26            <li><a href="#">エターナルムーンネックレス</a></li>
27            <li><a href="#">ビンドゥピアス</a></li>
28            <li><a href="#">エルフンブレスレット</a></li>
29        </ul>
30    </li>
31
32    <li>
33        <a href="#" class="menu">
34            <div class="brands">
35                <span class="date2">brands</span><br>
36                <span class="title2">ブランドから探す</span>
37            </div>
38        </a>
39        <ul>
40            <li><a href="#">ヴィヴァンローズリンク</a></li>
41            <li><a href="#">エターナルムーンネックレス</a></li>
42            <li><a href="#">ビンドゥピアス</a></li>
43            <li><a href="#">エルフンブレスレット</a></li>
44        </ul>
45    </li>
46    <li>
47        <a href="#" class="menu">
48            <div class="custom-search">
49                <span class="date2">search</span><br>
50                <span class="title2">カスタム検索</span>
51            </div>
52        </a>
53        <ul>
54            <li><a href="#">ヴィヴァンローズリンク</a></li>
55            <li><a href="#">エターナルムーンネックレス</a></li>
56            <li><a href="#">ビンドゥピアス</a></li>
57            <li><a href="#">エルフンブレスレット</a></li>
58        </ul>
59    </li>
60</ul>

box.css

CSS
1.nav2 {
2    *zoom: 1;
3    width: 600px;
4    height: auto;
5    display: inline-block;
6    font-size: 0;
7    padding: 0;
8    margin: 0;
9}
10
11.nav2 li {
12    position: relative;
13    width: 140px;
14    height: 100px;
15    text-align: center;
16}
17
18.nav2 .logo {
19    width: 170px;
20    margin-top: 10px;
21}
22
23.nav2 li:last-child {
24    border-right: none;
25}
26
27.nav2 li a {
28    display: inline-block;
29    width: 100%;
30    height: 100px;
31    color: #fff;
32    font-size: 14px;
33    line-height: 2.8;
34    transition: 0.5s;
35    z-index: 100;
36}
37
38.nav2 li ul {
39    left: 0;
40    top: 100%;
41    position: absolute;
42    z-index: 1000;
43    padding: 0;
44    margin: 0;
45}
46
47.nav2 li ul li {
48    overflow: hidden;
49    height: 0;
50    transition: 0.2s;
51    width: 100%;
52}
53
54.nav2 li ul li a {
55    padding: 13px 15px;
56    border-top: 1px solid #7ebbd9;
57    background: #7ebbd9;
58    text-align: left;
59    white-space: nowrap;
60    height: auto;
61}
62
63.nav2 li:hover > ul > li {
64    overflow: visible;
65    width: 100%;
66    height: auto;
67}
68
69.nav2 li:hover > a {
70
71}
72
73li:hover > a.menu {
74    border-radius: 25px;
75    border: 3px solid rgb(116, 151, 240);
76}