Как я могу добавить пунктирную линию в передней части меню

Question

я следующее меню в asp.net:

<div id="left"> 
    <div id="menus" runat="server"> 
     <div id="left_menu"> 
      <div class="abc"> 
      </div> 
      <div id="os"> 
      </div> 
      <div class="btm"> 
      </div> 
     </div> 
     <div id="left_menu"> 
      <div class="cde"> 
      </div> 
      <div id="l"> 
      </div> 
      <div class="G"> 
      </div> 
     </div> 
    </div> 

Я хочу добавить пунктирную линию в передней части меню, так линия должна быть долго меню. Я искал в Интернете и здесь не мог узнать, как я добавлю пунктирную линию перед меню. У меня есть CSS для пунктирной линии здесь:

#horizontal_dotted_line 
{ 
    border-top: 1px dotted #f00; 
    color: black; 
    background-color: #fff; 
    height: 1px; 
    width:50%; 
} 

Но где я должен поставить этот тег Div horizontal_dotted_line так, что он показывает в передней части меню?

Answer 1

Ваше меню вертикальное, ваша линия горизонтальная, но вы хотите, чтобы ваша линия была до тех пор, пока ваше меню?

Вы уверены, что не хотите вертикальную линию? Просто измените целевой идентификатор класса CSS с horizontal_dotted_line на menus и с границы сверху до границы слева. (Если это управление .NET, иметь его целевой класс вместо идентификатора, потому что Id .NET будет отличаться)

#menus { 
    border-left: 1px dotted #f00; 
    color: black; 
    background-color: #fff; 
    height: 1px; 
    width:50%; 
} 

Answer 2

Попробуйте это:

<div id="left"> 
    <div id="vertical-dotted-line"> 
     <div id="menus" runat="server"> 

с CSS:

#vertical-dotted-line{ 
    border-left: 1px dotted #f00; 
    overflow: hidden; 
}