65640

[code]

    ユーザーネーム（常に表示
    リンク
    リンク　　この３つはユーザーネームにマウスを当てた時表示される
    リンク
    
[/code]

マウスオーバー時のみリンクが表示されるようにしたいです  
cssがおかしいのかなと思いますがどう直せば良いかわからないです

ブラウザで検索してみましたが当てずっぽうになってしまい解決に至らないです

不躾な質問で申し訳ないですが教えてください

[code]

    <ul>
    <li><a><%=loginUser.getName()%>▼
    <button onClick="location.href='${pageContext.request.contextPath}/cart'">
    <i class="fas fa-shopping-cart"></i> <span id="header-cart-badge" class="badge badge-danger navbar-badge"> <%if (quantitySum > 0) {%> <%=quantitySum%> <%
        }
     %></span>
    </button>
    </a></li>
    <ul class="dropdwn">
    <li><a href="${pageContext.request.contextPath}/user/mypage">マイページ</a></li>
    <li><a href="${pageContext.request.contextPath}/moz/user/password">パスワード変更</a></li>
    <li><a href="${pageContext.request.contextPath}/logout">ログアウト</a></li>
    </ul> <%
        }
     %>
    </ul>
    
[/code]

css

[code]

    #header-user .dropdwn {
        padding: 0px;
        margin: 0px;
    }
    
    #header-user ul>li {
        display: block;
    }
    
    #header-user ul>li>a {
        display: block;
        font-size: 1em;
    }
    
    /* Submenu */
    #header-user ul li ul {
        position: absolute;
        margin-top: 0.3rem;
        top: 15px;
        right: 250px;
        display: none;
    }
    
    #header-user ul li :hover ul {
        display: inline-block;
    }
    
[/code]


CC BY-SA 4.0
2020-04-15T05:52:08.123
65637
2020-04-16T09:00:21.670
2020-04-16T09:00:21.670
32986
39642
question
html css
ホバーがうまくできない


  1. `ul li ul` というセレクタによって `li` 要素の子孫要素である `ul` 要素を非表示にしていますが、 HTML の構造を見ると **非表示にしたい`ul` 要素が `li` 要素の子孫要素になっていません**。

  2. `ul li :hover ul` というセレクタは「`li` 要素内の子孫要素がホバーされているとき、その子孫要素の `ul` 要素」に対して装飾を適用します。実際には、「ある `li` 要素がホバーされたとき、隣接した `li` 要素内の `ul` 要素」に対して装飾を行いたいため、修正が必要になります。

以上より、修正したコードは以下のようになります。

[code]

    #header-user .dropdwn {
      padding: 0px;
      margin: 0px;
    }
    
    #header-user ul>li {
      display: block;
    }
    
    #header-user ul>li>a {
      display: block;
      font-size: 1em;
    }
    
    /* Submenu */
    #header-user ul li ul {
      position: absolute;
      margin-top: 0.3rem;
      top: 15px;
      right: 250px;
      display: none;
    }
    
    #header-user ul li:hover + li ul {
      display: inline-block;
    }
[/code]

[code]

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
    
    <header id="header-user">
      <ul>
        <li>
          <a>▼
            <button onClick="location.href='${pageContext.request.contextPath}/cart'">
              <i class="fas fa-shopping-cart"></i> <span id="header-cart-badge" class="badge badge-danger navbar-badge">
              </span>
            </button>
          </a>
        </li>
        <li>
          <ul class="dropdwn">
            <li><a href="${pageContext.request.contextPath}/user/mypage">マイページ</a></li>
            <li><a href="${pageContext.request.contextPath}/moz/user/password">パスワード変更</a></li>
            <li><a href="${pageContext.request.contextPath}/logout">ログアウト</a></li>
          </ul>
        </li>
      </ul>
    </header>
[/code]


CC BY-SA 4.0
2020-04-15T07:29:09.423
65640
2020-04-15T07:29:09.423
32986
65637
answer