CSSを使用したナビゲーション

Question

私が探しているナビゲーションメニューの画像が含まれています。ドロップダウンメニューで簡単な水平および垂直ナビゲーションを行うことができますが、このシナリオは異なる、3つのリンクが右側にあり、リンクをクリックすると、下の図のように黄色の線である他のdivにサブメニューが表示されます。これで助けてください。提案やアドバイスをいただければ幸いです。

<div class="Menu-Right-Wrapper"> 
<div class="Menu1"><a href="#" id="home">HOME</a><br /> <a href="#" id="about">ABOUT US</a><br /><a href="#" id="services">SERVICES</a> </div> 
<div class="Menu2"><a href="#" id="articles">ARTICLES</a><br /> <a href="#" id="testimonials">TESTIMONIALS</a><br /><a href="#" id="contact">CONTACT US</a></div> 
</div> 

Answer 1

私は、これはあなたが望むすべてだと思う、それのいずれかが間違っているなら、私が知っている左。

JSFiddle

HTML

<div class="Menu-Right-Wrapper"> 
    <div class="Menu1"> 
     <a href="#" id="home">HOME</a><br /> 
     <a href="#" id="about">ABOUT US</a><br /> 
     <a href="#" id="services">SERVICES</a> 
    </div> 
    <div class="Menu2"> 
     <a href="#" id="articles">ARTICLES</a><br /> 
     <a href="#" id="testimonials">TESTIMONIALS</a><br /> 
     <a href="#" id="contact">CONTACT US</a> 
    </div> 
    <div class="blank-line"></div> 
    <div class="sub-menu"> 
     <div id="home-sub-menu"><a href="#">Home article 1</a>&nbsp;&nbsp;<a href="#">Home article 2</a></div> 
     <div id="about-sub-menu"><a href="#">About article 1</a>&nbsp;&nbsp;<a href="#">About article 2</a></div> 
     <div id="services-sub-menu"><a href="#">Services article 1</a>&nbsp;&nbsp;<a href="#">Services article 2</a></div> 
     <div id="articles-sub-menu"><a href="#">Articles article 1</a>&nbsp;&nbsp;<a href="#">Articles article 2</a></div> 
     <div id="testimonials-sub-menu"><a href="#">Testimonials article 1</a>&nbsp;&nbsp;<a href="#">Testimonials article 2</a></div> 
     <div id="contact-sub-menu"><a href="#">Contact article 1</a>&nbsp;&nbsp;<a href="#">Contact article 2</a></div> 
    </div> 
</div> 

CSS

.Menu-Right-Wrapper { 
    background-color: #ff0; 
    float: right; 
    width: 320px; 
    text-align: right; 
    line-height: 26px; 
    font-weight: bold; 
    font-family: arial; 
} 

.Menu1, .Menu2 { 
    float: left; 
    width: 40%; 
    border-right: 1px solid #000; 
    padding: 10px; 
    font-size: 15px; 
} 

.Menu-Right-Wrapper a:link { 
    text-decoration: none; 
    color: #000; 
} 

.Menu-Right-Wrapper a:visited { 
    color: #000; 
} 

.blank-line { 
    clear: both; 
    background-color: #fff; 
    height: 10px; /* Adjust height as applicable */ 
} 

.sub-menu { 
    font-size: 13px; 
    padding-right: 27px; 
    /*height: 26px; 
    overflow: hidden;*/ 
} 

.sub-menu div { 
    display: none; 
} 

JAVASCRIPT

$(document).ready(function() { 
    $(".Menu1 a, .Menu2 a").click(function() { 
     var subMenuId = $(this).attr("id") + "-sub-menu"; 
     $(".sub-menu").children().hide("fast"); 
     $(".sub-menu #" + subMenuId).show("fast"); 
     // For different effects try .fadeOut() and .fadeIn() 
    }); 
});