Comment code un sous-menu Horizontal au lieu de tomber vers le bas

J'ai une barre de navigation avec déroulant sous-menu. Mais comment convertir "du menu déroulant" sous-menu en "côte à côte" sous menu comme dans le site web d'Apple. Par exemple, si nous avons cliqué sur "ipad", il s'affiche "caractéristiques, Intégré dans les applications', 'ios'...à côté on a mis en évidence.

Je veux implémenter cela dans mon site web weebly.

InformationsquelleAutor Avinash | 2012-04-15
  1. 1

    Voulez-vous qu'il fonctionne exactement comme sur le site d'Apple?

    si oui....

    Sur Apple La sous-nav qui est chargé est une partie de l'iPad page et de ne pas en aucune façon partie du menu principal (dans la mesure où le code va). C'est juste un autre menu horizontal qui est chargé sur cette page en particulier.

    Donc sur votre site sur la première page que vous auriez votre menu principal, de style horizontalement

    <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>

    Puis sur page1.html vous voudrais juste ajouter un menu supplémentaire quelque part en dessous comme ça...

    <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>

    Si vous voulez un sous-menu qui fait partie du menu principal qui s'affiche lorsque l'utilisateur passe sur un élément du menu principal, vous devez ajouter un " ul " menu à l'intérieur de la pertinente de 'li' du menu principal, comme ça...

    <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>

    Alors juste le style de votre sous-nav pour afficher horizontalement comme le menu principal. Vous aurez besoin de mettre display:none et sho sur le vol stationnaire de son élément parent, c'est comme ça...

    CSS

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

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