可能なまとめこの画像のように左にメニューを置く？

Question

私はコード http://codepen.io/pdaoust/pen/fHybA

$(function() { 
 
    $('details').on('mouseover focus', function() { 
 
    $(this).attr('open', true); 
 
    }).on('mouseout blur', function() { 
 
    $(this).attr('open', false); 
 
    }) 
 
});

html { 
 
    line-height: 1.5; 
 
} 
 
details { 
 
    width: 20em; 
 
    border: 1px solid #ddd; 
 
    padding: 0 .5em; 
 
} 
 
summary { 
 
    padding: 0 .5em; 
 
    margin: 0 -.5em; 
 
} 
 
summary::-webkit-details-marker { 
 
    display: none; 
 
} 
 
summary::before { 
 
    float: right; 
 
    content: '▾'; 
 
    width: 1.5em; 
 
    text-align: center; 
 
    margin-right: -.5em; 
 
} 
 
details[open] summary::before { 
 
    content: '▴'; 
 
}

<details tabindex=0> 
 
    <summary>Hi, I am a summary.</summary> 
 
    <p>Well I am some content. <a href="#">Here's a link.</a></p> 
 
</details>

を見るためのホバリングメニューを作成するが、私はこのイメージ

のように左にプット・メニューの利用可能性、これがあるかどうかを知りたいです

助けてください

Answer 1

コードを別のものに変換しないでください。そのペンのコードは、それがしていることを正確に行い、ホバーの詳細テキストを表示するためのものです。メニューは同様に表示されますが、少し複雑なコードが必要です。メニューが必要な場合は、メニュー用のコードを探します。