0

我做了一个大型下拉菜单，现在我想要它在 intel.com 中的样式，我的意思是链接下方的箭头，如何实现，我的代码如下。

<html>

    <head>
        <style>
    #header {
        border: 10px;
        border-color: #000000;

    }
   div.inline{float:left; width: 18%;}
   .cls{clear:both;}
  content_div div{ margin-right:10%; height:150px; border-color: #008AD2;}
   </style>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
        <script>

            $(document).ready(function(){
                $('#sub_menu').hide();
                $('#menu').hover(function(){
                     $('#sub_menu').show();
                },function(){
                    $('#sub_menu').hide();
                });

                $('#sub_menu').hover(function(){
                     $('#sub_menu').show();
                },function(){
                    $('#sub_menu').hide();
                });
              $('#content_div div').hide();
              $('#content_div div:first').show();

               $('.inline').hover(function(){
                   var id=$(this).attr("id");
                  // alert($(this).attr("id"));
                     $('#content_div div').hide();
                     if(id=="1")
                         {
                             $('#one').show();
                         }
                         else if(id=="2")
                             {
                                 $('#two').show();
                             }
                              else if(id=="3")
                             {
                                 $('#three').show();
                             }
                          else if(id=="4")
                             {
                                 $('#four').show();
                             }
                              else if(id=="5")
                             {
                                 $('#five').show();
                             }
                },function(){
                 //   $('#content_div div').hide();
             // $('#content_div div:first').show();
                });
 });
        </script>
</head>
    <body>
        <div id="header" style="background-color:#008AD2; border-color: #000000">
            <br/><br/>
            <div id="menu" style="background-color:#ffffff;width:20%;margin-left:10px"> keep a image for menu drop down </div>
            <div style="background-color:#ffffff;float:right; margin-right:20px;"> sign img</div>
        </div>

        <div id="sub_menu" class="sub_menu" style="margin-right:10%;margin-right: 10px;border:2px solid #000000;">
            <div>
            <div id="1" class="inline">menu list here1 </div>
            <div id="2" class="inline">menu list here 2</div>
            <div id="3" class="inline">menu list here 3</div>
            <div id="4" class="inline">menu list here 4</div>
            <div id="5" class="inline">menu list here 5</div>
            <br class="cls"/>
            </div>
            <div id="content_div">
            <div id="one" class="content" style="height:100px; background-color: #000000"> below list1
            </div>  
             <div id="two"class="content" style="height:150px; background-color: #0000ff"> below list2
            </div>  
             <div id="three" class="content" style="height:180px; background-color: #0ff000"> below list3
            </div>  
             <div id="four" class="content" style="height:200px; background-color: #00ff00"> below list4
            </div>  
             <div id="five" class="content" style="height:100px; background-color: #ff0000"> below list5
            </div>  
            </div>

        </div>
    </body>
</html>

所以我需要的只是造型功能已经实现。

谢谢

4

0 回答 0