-4

ボタンに高度なスタイルのアンカーを使用するシンプルな水平ナビゲーションメニューがあります。これで、「ストア」と呼ばれる最後のボタンに、このjqueryホバー効果を介して表示されるコンテンツのリストが表示されます。

「保存」ボタンを他のボタンと揃えることができません。2日間、私はfloat:left margin 50% whatever、、、、position:incorrectおよびさまざまな安っぽいハックを試しています。CSSポジショニングのその時点で、テーブルを使用してレイアウトを再構築することを真剣に考え始めていますoverflow:I-forget-what。clear:both

私の魂をテーブルに売る代わりに、もっと経験豊富な人に見てもらいたいと思います。

http://www.ideagasms.net/ideagasms-with-dropdown-menu.html

ソースを表示すると、主要な要素の横にたくさんのコメントが追加されているので、すべてをすばやく理解しやすいはずです。ありがとうございました。:)

4

3 に答える 3

2

このコードは動作するはずです:

固定幅のラッピング div をメニューに追加し、ページの中央に配置しました。次に、各 a タグを li に追加しました。

あなたの jQuery メニューは壊れていますが、dom で順序が変更されたので、正しい要素を再度見つける必要があります。

また、いくつかの新しいスタイルを作成して、要素に再度追加する必要がある場合もあります。私はおそらくいくつかのビットを台無しにしました。今後スタイリングの問題が発生しないように、適切なクラスと ID を追加することをお勧めします。

<div id="nav">
 <ul>
  <li>
      <a alt="STORE" class="navmenu faded" href="http://www.ideagasms.net/ideagasms-products/">STORE</a>
    <ul class="file_menu">
      <li><a href="#file">File</a></li>
      <li><a href="#edit">Edit</a></li>
      <li><a href="#view">View</a></li>
      <li><a href="#insert">Insert</a></li>
      <li><a href="#modify">Modify</a></li>
      <li><a href="#control">Control</a></li>
      <li><a href="#debug">Debug</a></li>
      <li><a href="#window">Window</a></li>
      <li><a href="#help">Help</a></li>
    </ul>
  </li>
  <li><a alt="HOME" class="navmenu faded" href="http://www.ideagasms.net/link">HOME</a>     </li>
  <li><a alt="VIDEO" class="navmenu faded" href="http://www.ideagasms.net/link">VIDEO</a> </li>
  <li><a alt="ABOUT" class="navmenu faded" href="http://www.ideagasms.net/link">ABOUT</a></li>
  <li><a alt="CONTACT" class="smcf-link navmenu faded">CONTACT</a></li>
  <li><a alt="DONATIONS" class="navmenu scroll faded" href="http://www.ideagasms.net/link">DONATIONS</a></li>
  <li><a alt="MENTORING" class="navmenu faded" href="http://www.ideagasms.net/link">MENTORING</a></li>
  <li><a alt="BEAUTY" class="navmenu faded" href="http://www.ideagasms.net/link">BEAUTY</a></li>
  <li><a alt="SNIPPETS" class="navmenu scroll faded" style="letter-spacing:1px" href="http://www.ideagasms.net/link">#iG</a></li>
</ul>
</div>


<style type="text/css"> 


#buttonnav {  
float:left;
height: 25px;
width: 100px;
margin-bottom:1cm;
position:relative;
z-index:9; 
}
#nav {
  margin: auto;
  width: 740px;
  background: orange;
}
ul {
  margin: auto;
}
ul li {     
    display: inline;
    float: left;

}

.menu_class {
    border:1px solid #1c1c1c;
}

ul.file_menu {
    cursor:pointer;
    display:none;
    width:260px;
    border: 1px solid #1c1c1c;
    margin:0; 
    padding:0; 
    list-style:none;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

</style>
于 2012-06-07T21:21:14.223 に答える
0

そのメニューはひどいものに見えますが、正直なところ、お気づきのように柔軟性がありません。

私があなただったら、適切なhtml構造が（ネストされた）li構造で使用される方法で再構築するので、その余分なアイテムとサブメニューを簡単に追加できます...

これは醜い修正です

#buttonnav {
    display: inline-block;
    /* remove the float & widht */
}

.hoverli ul.file-menu {
    position:absolute;
}

これはおそらく基本に戻って、適切なメニューの作成方法を再学習する必要がある場合です. これがコンテンツ管理システムにある場合は、クラスとテンプレートをオーバーライドして、簡単に追加できるようにします...

サブメニューに欠けているものもposition: absolute;あります（おそらく、サブメニューの親を相対的にしたいでしょう）。

于 2012-06-07T21:19:28.780 に答える
0

ボタンを適切に表示し、サブメニューを機能させるには、次の 2 つの点を修正する必要があります。

この実用的なフィドルの例を参照してください!

1)

ボタンのCSSを次のように設定します。

#buttonnav {
    display: inline-block;
    height: 25px;
    position: relative;
    z-index: 9;
}

注: display:inline-block;入りfloat、 、margin出widthます。

2)

サブメニューの css を調整して、レイアウトを壊さずに表示できるようにします。

CSS

.hoverli {
    position: relative;
    z-index: 1;
}
.hoverli ul {
    position:absolute;
}
于 2012-06-07T21:20:29.200 に答える