クラスに応じてスパンタグの左から右に絶対位置を変更してください

Question

これは私の最初の質問ですが、これ以上来ることは確実です。 達成することさえ可能かどうかを知りたい小さなポジションの問題があります。

私はこれまでのところ、とても良い、私はこれらが左フロート、および連絡先とサポートオプションについては、私は右のそれをフロート主なオプションのために、<li> Sを浮かべて順不同リスト（<ul>）を持っています。今私はそれぞれ<li>の中に<span>を持っています。これは水平リストの下に表示され、リストはメニューのためのものです。これらの<span>はメニュー選択の説明として機能し、通常のオプションの場合はposition:absolute; top:30px; left:0;を使用します。今私は右に浮動小数点はposition:absolute; top:30px; right:0;を取得し、これはまったく動作しませんこれらのメニュー項目の位置属性を変更したいと思います。より具体的なCSSルールとそれ以外のものでこれを変更することは不可能だと思われますが、フロートはうまく機能します。

HTML：

<div id="menu"> 
<ul> 
    <li>Menu1<span>Info1</span></li> 
    <li>Menu2<span>Info2</span></li> 
    <li class="support">Support1<span>Info3</span></li> 
</ul> 

CSS：

#menu{position:relative;} 
#menu ul{list-style:none;} 
#menu ul li{float:left;} 
#menu ul li.support{float:right;} 
#menu ul li span{display:none;} 
#menu ul li:hover span{display:block; position:absolute; top:30px; left:0;} 
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0} 

CSSの最後の行には違いはありません！ 誰かが答えや仕事をしているなら、私は大いに助けてくれてありがとう。

質問が回答と問題を解決しました。 James AronsまたはMercatorの投稿を確認してください。

Answer 1

right:0と設定しても、left:0はまだ継承されています。 left:autoを設定して、supportクラスのスタイルを上書きする必要があります。

Answer 2

Hmm奇妙です。あなたのコードがうまくいかない理由を教えていただけません。サポート以来動作するはずです：ホバー・スパンはより具体的なセレクターです。

修正点が見つかりました： 位置の絶対要素が左にあります。デフォルトでは 左を削除した場合：0;スパンセレクタから操作できます。

あなたのコードは次のようになります。

#menu{position:relative;} 
#menu ul{list-style:none;} 
#menu ul li{float:left;} 
#menu ul li.support{float:right;} 
#menu ul li span{display:none;} 
#menu ul li:hover span{display:block; position:absolute; top:30px;} 
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0} 

Answer 3

そのCSSから判断すると、あなたは正しくCSSを理解していないようですか、少なくともそれを正しく使用していません。あなたは良い紹介についてはthe cascade, specificity and inheritanceについてのSitePointの記事を読んでみたいかもしれません。

このCSSの最後の2つの行がsupportクラスのリスト項目に適用されるため、機能しないのはその理由です。 2行目から最後の行はすべてのリスト項目に適用され、最後の行はsupportリスト項目の最後の行に追加されます。したがって、最後の行にはleftプロパティがないので、プロパティは前の行からカスケードし、left: 0でもになります。あなたは特別なケースをマークするためにクラスを使用している場合は

、あなたは一般的な例すべてのCSSを繰り返しますが、それだけを変更する必要はCSSを提供するべきではありません。

#menu ul li:hover span {display:block; position:absolute; top:30px; left:0;} 
#menu ul li.support:hover span {left:auto; right:0;} 

CSSことsupportクラスのリスト項目は、他のリスト項目が取得するすべてのCSSを取得しますが、leftプロパティがデフォルトにリセットされ、代わりにrightプロパティが設定されていることを意味します。