ULドロップダウンメニューの問題

私のドロップダウンメニューには2つの問題があります.1つはリンク、もう1つはIE7問題です。、上記のいくつかの画素を含む、私は置くと、私は成功したリンクのテキストをハイライト表示していますコードが質問した後、次の、そして両方のインスタンスでは、私がULドロップダウンメニューの問題

（プロジェクトの重要な部分）のjavascriptを避けるためにしようとしています下に戻り、右に&を残してください。ただし、クリック可能なハイライトの唯一の部分（つまり、ハイパーリンクにアクセスできる場所）は、テキストの場所であり、ハイライト、パディング、テキスト全体をクリック可能にしたいと考えています。私は前にそれをやったことがありますが、私はそれを修正する方法に関する現在のコードと混同しています。誰か助けてくれますか？
同じドロップダウンを使用すると、IE7を除くすべてがうまくいきます。 IE7のユーザーの中には、メニュー項目をハイライトしてドロップダウンが発生すると、ドロップダウンが消える前に2番目の項目にしか到達せず、すべてのドロップダウンでそれが行われるとの不満がありました。私はそれがIE7の問題だと知っていますが、私はそれを回避する必要があります。どんな助け？

私のCSSコード：

ul       { list-style: none; } 
p       { margin: 8px 0; } 
ul.dropdown     { list-style-type:none;height:24px; top:2px; padding:0px 0px 0px 0px;;margin:0px 0px 0 1px;vertical-align:bottom; color:#000000; position: relative; } 
ul.dropdown a:hover   { color: #000; } 
ul.dropdown a:active  { color: #ffa500; } 
ul.dropdown li    { float: left; position:relative; vertical-align:middle; background-position:0 -40px; padding: 2px 4px 5px 2px; margin-right:6px;} 
ul.dropdown li a   { display: block; padding: 0px 0px; color: #222; text-decoration:none; vertical-align:middle; width:100%;} 
ul.dropdown li:last-child a { border-right: none; } 
ul.dropdown li.hover, 
ul.dropdown li:hover  { background: #F3D673; color: black; position: relative; } 
ul.dropdown li.hover a  { color: black; } 

ul.dropdown ul    { width: 152px; visibility: hidden; position: absolute; top: 100%; left: -40px; z-index:60;} 
ul.dropdown ul li   { font-weight: normal; background: #ECEAD8; color: #000; width:100%;/*border-bottom: 1px solid #ccc;*/ float: none; } 
ul.dropdown ul li.nohover { color: black; background: #ECEAD8; position:relative; } 

ul.dropdown ul li a   { border-right: none; width: 100%; display: inline-block; min-height:1.4em;} 

ul.dropdown ul ul   { left:72.7%;top: 0px; width:158px; z-index:50; display:inline-block;} 
ul.dropdown li:hover > ul { visibility: visible; display:block; } 

#arrowRight     { float:right; margin-top:-11px;} 
a.moreItems {background: url(/images/menu/arrow_r.gif) no-repeat right;}

ここでは、HTMLコードです：

<!DOCTYPE HTML> 
<html> 
<head> 
<title></title> 
<link rel=stylesheet type="text/css" href="menustylesheet.css"> 
</head> 
<body> 
<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td height="25" class="topmenu" bgcolor="##ECEAD8" nowrap> 
<ul class="dropdown"> 
    <li><a href=""><b>Item 1</b> <img src="/images/menu/arrow_d.gif" border="0" height="7" width="7"></a> 
     <ul> 
      <li><a class="moreItems" href="">Item 1-1</a> 
       <ul> 
        <li><a href="">Item 1-1-1</a></li> 
       </ul> 
      </li> 
      <li><a class="moreItems" href="">Item 1-2</a> 
       <ul> 
        <li><a href="">Item 1-2-1</a></li> 
       </ul> 
      </li> 

      <li>Item 1-3 <div style="vertical-align:middle;"><img src="/images/menu/arrow_r.gif" id="arrowRight" border="0"></div> 
       <ul> 
        <li><a href="">Item 1-3-1</a></li> 
        <li><a href="">Item 1-3-2</a></li> 
       </ul> 
      </li> 
      <li><a href="">Item 1-4</a></li> 
      <li><a href="">Item 1-5</a></li> 
    </ul> 
    </li> 
</ul> 

     </td> 
    </tr> 
    <tr><td bgcolor="##c0c0c0" style="height:1px;"></td></tr> 
</table> 
</body> 
</html>

これは前に回答されている場合、私は謝罪が、私は誰かがどこコードに特定することを願って私はそれを動作させるために変更または修正する必要があります。

出典

2012-01-25 user1100412

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

^これはIEのための回避策を見つけるために、多くの場面で私を支援してきました。

出典

2012-01-25 20:55:04 Hikalea

いいですが、私が探しているものを見つけるつもりはないと思います。ドロップダウンメニューについての例はありませんでした。見落とされている箇所がある場合は、私を案内してください。そうでなければ、あなたや他の誰かが他の提案や回避策を持っていますか？ – user1100412

私はあなたの最初の問題に対する答えがあります。この種のメニューを実行するとき。私はできる限りパディングから遠く離れています。私はそれが簡単だけのマージンを使用することを見つけたが、初心者のために、私はあなたのために構築されたページを見てみましょう：私は以下のコードを説明します

http://www.albatrossfonts.com/stack/ulbuttons.html

。ここは私のHTMLです：

<div id="wrapper"> 

    <ul class="dropdown"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
    </ul> 

</div>

とCSS：リンク、代わりにちょうど：私は宣言

.dropdown 
{ 
    width: 200px; 
    display:block; 
    margin: 200px auto 0 auto; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 1px 0 0 0; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li a:link, .dropdown li a:visited 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 0; 
    color: #ffffff; 
    background-color: #666666; 
    text-decoration: none; 
    text-indent: 12px; 
    line-height: 44px; 
} 

.dropdown li a:hover 
{ 
    background-color: #333333; 
}

注意してください。私は訪問した国家を元の国家と同じにしたいので訪問したと宣言した。

.dropdownエントリでは、単にリスト（ul）の幅を定義し、正しく表示させました。

.dropdown liの項目では、各リスト項目の幅と高さを設定し、箇条書きを削除し、表示と浮動小数点数を設定してボックスとして表示します。パディングなし。ただの箱。

.dropdown li a：link、.dropdown li a：visited entry、私たちが本質的にやっていることは、リスト項目ボックスにリンクを "埋め込む"ことです。リンクを定義することができます箱も同様です。だから私はリンクの大きさを私たちの李と全く同じサイズに設定しました（これがボックス全体をクリック可能にしています）。次に、ディスプレイと浮動小数点数、背景色、テキストの色、または単に「色」を設定します。"

テキストを中央に配置するには、vertical-alignを使用しないでください。line-heightをli要素と同じ高さに設定してください。

は、あなたのテキストが水平に表示された場合は、テキストのインデントプロパティを設定し、コントロールのテキスト整列を使用するには、この例では、私はテキストのインデントを使用

を最後に、我々はAを定義します。。。状態を置くことが重要ですここで定義する必要があるのは、実際に変更されるプロパティだけです。この場合は背景色です。

あなたは、マウスダウンイベントのために広告に状態を望んでいた場合、あなたのような何かを行うことができます：

.dropdown li a:active 
{ 
    background-color: #000000; 
    text-indent: 20px; 
}

///////////編集を////////////

複数のメニューや子メニューに1つのCSSスタイルを使用する方法は次のとおりです。

2つの別々のULのためのhtml：

<ul class="dropdown"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
</ul> 

<ul class="dropdown"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 1</a></li> 
</ul>

CSS：（あなたがクラスにそれらの両方を割り当てるので、同じまま

.dropdown 
    { 
     width: 200px; 
     display:block; 
     margin: 200px auto 0 auto; 
     list-style-type: none; 
     padding: 0; 
    } 

.dropdown li 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 1px 0 0 0; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li a:link, .dropdown li a:visited 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 0; 
    color: #ffffff; 
    background-color: #666666; 
    text-decoration: none; 
    text-indent: 12px; 
    line-height: 44px; 
} 

.dropdown li a:hover 
{ 
    background-color: #333333; 
}

を、あなたを適用したい場合は、 "ドロップダウンを。"子ウールのスタイルは次のようになります。

<ul class="dropdown"> 
    <li><a href="#">Button 1</a> 
      <ul> 
       <li><a href="#">subButton 1</li> 
       <li><a href="#">subButton 2</li> 
       <li><a href="#">subButton 3</li> 
      </ul> 
    </li> 
    <li><a href="#">Button 1</a></li> 
    <li><a href="#">Button 1</a></li> 
</ul>

子供のulと子を含むようにスタイルを追加するだけです私は、次のようにします。ここで.dropdownは実際に最初のulを表します。だから.dropdown（ul） - > li（ドロップダウンリスト内のリスト項目） - > ul（ドロップダウン内のul） - > li（ドロップダウンul li内のli）

申し訳ありません混乱させますが、言い換えれば、親のulにクラスを割り当てなかった場合、それはul li ul liが子リスト内のリスト項目にアクセスすることになります。

.dropdown, dropdown li ul 
{ 
    width: 200px; 
    display:block; 
    margin: 200px auto 0 auto; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li, .dropdown li ul li 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 1px 0 0 0; 
    list-style-type: none; 
    padding: 0; 
} 

.dropdown li a:link, .dropdown li a:visited, .dropdown li ul li a:link, .dropdown li ul li a:visited 
{ 
    width: 200px; 
    height: 44px; 
    display: block; 
    float: left; 
    margin: 0; 
    color: #ffffff; 
    background-color: #666666; 
    text-decoration: none; 
    text-indent: 12px; 
    line-height: 44px; 
}

出典

2012-01-25 21:29:49 jhilgert00

それは素晴らしいです！動的な多層メニュー（つまり、量が動的に決定される複数のサブメニュー）では、上記のコードが提供するのと同じ属性およびアクションをすべてのサブメニューに動的に与えるために何をする必要がありますか？ – user1100412

@ user1100412これを簡単に行うには、コンマを追加し、次にサブメニューのクラス名をcssの識別子（名前）部分に追加します（例：.dropdown li：alink、.dropdownSubmenu li a：link {properties goここに...}あなたがリストすることができる数に制限はなく、コンマで区切られた識別子のすべてがこのように同じプロパティを持ちます。たとえば、異なるプロパティが1つしかない場合、コンフリクトのない別のプロパティを個別に宣言できます。また、コードのサイズを小さくします。 :)あなたの最初の質問に答えましたか？ – jhilgert00

上記のコードで例を挙げてください。私は最初にそれを試しているし、私は多くの運を持っていないよ。 – user1100412

ULドロップダウンメニューの問題

答えて

関連する問題