ドロップダウンの代わりに水平サブメニューをコーディングする方法

Question

私はドロップダウンサブメニューのナビゲーションバーを持っています。しかし、アップルのウェブサイトのように、サブメニューを「サイド・バイ・サイド」サブメニューに「ドロップダウン」する方法たとえば、「ipad」をクリックすると、「features」、「Built in apps」、「ios」、...が横に並んで表示されます。

私はweeblyのウェブサイトでこれを実装したいと思います。

Answer 1

アップルサイトのように正しく動作しますか？

もしそうなら....ロードされAppleで

サブナビゲーションは、メインメニュー（限りコードが行くように）のいずれにせよ部分にiPadのページの一部でありません。特定のページにロードされる単なる水平メニューです。

だからあなたの最初のページにあなたのサイト上であなただけのメインメニューを持っているでしょう、あなたはこのようにどこかに以下の余分なメニューを追加しますpage1.htmlに続いて水平に

<ul id="main-menu"> 
    <li><a href="page1.html">page one</a></li> 
    <li><a href="page2.html">page two</a></li> 
    <li><a href="page3.html">page three</a></li> 
    <li><a href="page4.html">page four</a></li> 
</ul> 

スタイル...

<ul id="main-menu"> 
    <li><a href="page1.html">page one</a></li> 
    <li><a href="page2.html">page two</a></li> 
    <li><a href="page3.html">page three</a></li> 
    <li><a href="page4.html">page four</a></li> 
</ul> 

<ul id="sub-menu"> 
    <li><a href="page1_option1.html">option one</a></li> 
    <li><a href="page1_option2.html">option two</a></li> 
    <li><a href="page1_option3.html">option three</a></li> 
    <li><a href="page1_option4.html">option four</a></li> 
</ul> 

ユーザーがメインメニュー項目の上を移動したときに表示されるメインメニューの一部である場合、メインメニューの関連する「li」内に「ul」メニューを追加するとこれ...

<ul id="main-menu"> 
    <li id="show-sub-menu"><a href="page1.html">page one</a> 
    <ul id="sub-menu-1"> 
     <li><a href="page1_option1.html">option one</a></li> 
     <li><a href="page1_option2.html">option two</a></li> 
     <li><a href="page1_option3.html">option three</a></li> 
    </ul> 
    </li> 
    <li><a href="page2.html">page two</a></li> 
    <li><a href="page3.html">page three</a></li> 
    <li><a href="page4.html">page four</a></li> 
</ul> 

次に、メインメニューのように水平に表示するようにサブナビゲーションのスタイルを設定します。あなたは、ディスプレイに設定する必要がありますます。http：//net.tutsplusこのような親要素のホバー上のどれと翔、...

CSS

#main-menu li ul{ 
    display:none; 
} 

#main-menu li#show-sub-menu:hover ul{ 
    display:block; 
}