Question

I have following menu in 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>

I want to add dotted line in front of the menu so line should be as long the menu is. I searched online and on here cant find out how i will add the dotted line in front of the menu. I have css for dotted line here:

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

But where should i put this div tag horizontal_dotted_line
so that it shows up in front of the menu?

Answer 1

Your menu is vertical, your line is horizontal, but you want your line to be as long as your menu?

Are you sure you don’t want a vertical line? Just change the target ID of the CSS class from horizontal_dotted_line to menus and from a border top to a border left. (If this is a .NET control, have it target a class instead of an ID, because the .NET Id will be different)

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