2

Hibachi メニューの下に、ランチとディナーなど、2 つ目のドロップダウン メニューを追加する必要があります。HTMLに追加する方法は知っていますが、CSSに追加して機能させるのを手伝ってくれる人はいますか? 私が使用しているナビゲーションの html と css コーディングの両方を投稿しました。ありがとう！

 <nav id="topnav" class="clear">
    <ul>
      <li class="active"><a href="#"> Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Menus</a>
        <ul>
          <li><a href="#">Lunch Menu</a></li>
          <li><a href="#">Dinner Menu</a></li>
          <li><a href="#">Appetizers Menu</a></li>
          <li><a href="#">Hibachi Menus</a> </li>
         <li><a href="#">Sushi Menu</a></li>
        </ul>
      </li>
      <li><a href="#">Reservations</a></li>

      <li><a href="#">Contact Us</a></li>
            <li class="last"><a href="#">Press</a></li>

    </ul>
  </nav>

Below is the CSS:


#topnav{padding:20px 0;}
#topnav li{float:left; margin-right:30px;}
#topnav li li{margin-left:30;}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
    display:block;
    margin:0;
    padding:0;
    color:#c19c55;
    background-color:#232323;
}
#topnav ul li a:link, #topnav ul ul li a:visited{border:none;}

#topnav li a:hover, #topnav li.active a{
    color:#c19c55;
    background-color:#232323;
}
#topnav li li a:link, #topnav li li a:visited{
    width:150px;
    float:none;
    margin:0;
    padding:7px 10px;
    color:c19c55;
    background-color:#232323;
    border:none;
}

#topnav li li a:hover{
    color:c19c55;
    background-color:000;
}

#topnav ul ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px;  padding:5px 0 0 0; border-bottom:1px solid #666666;}
#topnav ul ul a{width:140px;}
#topnav li:hover ul{left:auto;}
#topnav li:hover ul ul{left:auto;}
#topnav li:hover{
    position:static;
    font-family: Georgia, "Times New Roman", Times, serif;
}
#topnav li.last{margin-right:0;}
4

2 に答える 2

1

jquery プラグインのdroppyを使用して、ドロップダウン メニューを簡単に作成できます。心配するコーディングの手間はありません。次の例を参照してください。

<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/droppy/stylesheets/droppy.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"/></script>
<script src="http://onehackoranother.com/projects/jquery/droppy/javascripts/jquery.droppy.js"/></script>
<nav>
    <ul id="topnav">
      <li class="active"><a href="#"> Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Menus</a>
        <ul>
          <li><a href="#">Lunch Menu</a></li>
          <li><a href="#">Dinner Menu</a></li>
          <li><a href="#">Appetizers Menu</a></li>
          <li><a href="#">Hibachi Menus</a> </li>
         <li><a href="#">Sushi Menu</a></li>
        </ul>
      </li>
      <li><a href="#">Reservations</a></li>

      <li><a href="#">Contact Us</a></li>
            <li class="last"><a href="#">Press</a></li>

    </ul>
  </nav>



<script type='text/javascript'>
  $(function() {
    $('#topnav').droppy();
  });
</script>

これが実際の例です: http://jsfiddle.net/wVaek/

于 2013-03-09T20:29:51.587 に答える
0

これはコードをコピーして貼り付けるためのサイトではないので、残りは自分でやらせてください。キックスタートはこちら

<style>


#topnav{padding:20px 0;}
#topnav li{float:left; margin-right:30px;}
#topnav li li{margin-left:30;}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
    display:block;
    margin:0;
    padding:0;
    color:#c19c55;
    background-color:#232323;
}
#topnav ul li a:link, #topnav ul ul li a:visited{border:none;}

#topnav li a:hover, #topnav li.active a{
    color:#c19c55;
    background-color:#232323;
}
#topnav li li a:link, #topnav li li a:visited{
    width:150px;
    float:none;
    margin:0;
    padding:7px 10px;
    color:c19c55;
    background-color:#232323;
    border:none;
}

#topnav li li a:hover{
    color:c19c55;
    background-color:000;
}
#topnav ul ul ul{
  display: none;

  position: absolute;
  right: -150px;
}

#topnav ul ul li{
  position: relative;
}

#topnav ul ul li:hover ul{
    display: inline-block;
}

#topnav ul ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px;  padding:5px 0 0 0; border-bottom:1px solid #666666;}
#topnav ul ul a{width:140px;}
#topnav li:hover ul{left:auto;}
#topnav li:hover ul ul{left:auto;}
#topnav li:hover{
    position:static;
    font-family: Georgia, "Times New Roman", Times, serif;
}
#topnav li.last{margin-right:0;}
</style>
<nav id="topnav" class="clear">
    <ul>
      <li class="active"><a href="#"> Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Menus</a>
        <ul>
          <li><a href="#">Lunch Menu</a></li>
          <li><a href="#">Dinner Menu</a></li>
          <li><a href="#">Appetizers Menu</a></li>
          <li><a href="#">Hibachi Menus</a> 
            <ul>
              <li><a href="#">Lunch Menu</a></li>
              <li><a href="#">Dinner Menu</a></li>
              <li><a href="#">Appetizers Menu</a></li>
              <li><a href="#">Hibachi Menus</a> </li>
             <li><a href="#">Sushi Menu</a></li>
            </ul>

          </li>
         <li><a href="#">Sushi Menu</a></li>
        </ul>
      </li>
      <li><a href="#">Reservations</a></li>

      <li><a href="#">Contact Us</a></li>
            <li class="last"><a href="#">Press</a></li>

    </ul>
  </nav>

幸運を！

于 2013-03-09T19:54:41.877 に答える