html - dt と dd が同じ列にあり、両方がインラインである dl タグのスタイルを設定する方法

Question

こんなことやってみたい HOME | お問い合わせ | ブログ ホームに戻る | 私たちを知ってみましょう | 私たちの更新に従ってください

ホームに戻るということは、HOMEの下にあるjstを意味し、次に境界線が、列のように連絡先の下にもあり、私のコードがhtmlであることを知らせます。

<dl class="dl">

  <dt class="nav"><a href=""><b>HOME</b></a></dt>
        <dd class="nav1">Back to home</dd>


  <dt class="nav"><a href=""><b>PRODUCTS</b></a></dt>
       <dd class="nav1">What we have for you</dd>

  <dt class="nav"><a href=""><b>SERVICES</b></a></dt>
       <dd class="nav1">Things we do</dd>

  <dt class="nav"><a href=""><b>BLOG</b></a></dt>
       <dd class="nav1">Follow our updates</dd>

  <dt class="nav"><a href=""><b>CONTACT</b></a></dt>
      <dd class="nav1">Ways to reach us</dd>

</dl>

css:

#header .dl{
    text-decoration:none;
    height:50px;
    width:60%;
    float:right;
    list-style:none;
    margin-right:10px;
    margin-top:40px;

    }
#header .nav{

    display:inline;
    color:#666;
    font-family:Tahoma, Geneva, sans-serif;
    text-decoration:none;
    margin-left:10px;
    font-size:15px;
    border-right:1px dotted #CCCCCC;
    float:left;
    padding-right:15px;
    padding-left:20px;


    }
#header .nav a{
    color:#009;
    text-decoration:none;
    }
#header .nav a:hover{
    color:#09f;
    }
#header .nav1{


    clear:both;
    }

助けて