How to create horizontal main menus with vertical sub menus by using asp.n

Question

lavanya uppala 0 Newbie Poster

11 Years Ago

Hi sirs
I have a problem with Menus and Sub menus.Main menu create horizontally but sub menu alo displayed in Horizontally.I want to Display the horizontal Main menus and vertical sub menus. I am using ASP.net
Thanks in Advance.....

asp.net

3 Contributors
4 Replies
2K Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by rituu221

All 4 Replies

JorgeM 958 Problem Solver

11 Years Ago

Are you using an asp.net control for the menu creation? You should be able to simply apply the appropriate style to have the sub-menu come down vertically. If you are using the menu-item, this control is rendrered as a list-item whithin a list, which is generally styled as a block element so that the items are displayed vertically.

I have an example of a Multi-Navigation Menu that you can refer to so you can see how styles (CSS) is applied to get the desired result.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

lavanya uppala 0 Newbie Poster · Answer 1 · 2013-01-11T04:04:08+00:00

Thank you for your reply.I am using the menu item, and alo use the list items but it is not display the vertically. Please suggest me

Thanks in Advance..

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 2 · 2013-01-11T13:52:46+00:00

To display them horizontally, just access the properties of the control within your design view, or manually add the orientation attribute. Here is an example...

<asp:Menu runat="server" Orientation="Horizontal">
        <Items>
            <asp:MenuItem Text="item1" Value="item1"></asp:MenuItem>
            <asp:MenuItem Text="item2" Value="item2"></asp:MenuItem>
        </Items>
        </asp:Menu>

rituu221 0 Newbie Poster · Answer 3 · 2013-01-12T10:21:41+00:00

Hi dear
try this html code with your .Net platform.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="JavaScript" src="ieHover.js"></script>
    <style type="text/css" media="all">

    #divNav {
        background: transparent url(bk-nav.jpg) no-repeat top left;
        margin: 0;
        padding: 0;
        height: 80px;
        width: 800px;
    }

    #nav {
        position: relative;
        top: 55px;
        height: 80px;
        width: 800px;
    }

    #nav li ul, #nav li ul {
        margin: 0;
        padding: 0;
    }

    #nav a {
        text-decoration: none;
    }

    #nav li { /*float the main list items*/
        margin: 0;
        float: left;
        display: block;
        padding-right: 15px;
    }

    #nav li ul {
        display: none;
    }

    #nav li.off ul, #nav li.on ul  { /*put the subnav below*/
        position: absolute;
        top: 25px;
        left: 0;
        padding-top: 15px;
        background: #224d6f;
        height: 28px;
        width: 740px;
        padding-left: 60px;
    }

    #nav li.on ul {
        background: #f90;
    }

    #nav li.on:hover ul, #nav li.over ul { /*for ie*/
        background: #224d6f;
    }

    #nav li a {
        color: #224d6f;
        font-weight: bold;
        display: block;
        width: 93px;
        padding: 0;
    }

    #nav li.on a {
        color: #f90;
    }

    #nav li.on ul a, #nav li.off ul a {
        border: 0;
        float: left; /*ie doesn't inherit the float*/
        color: #f90;
        width: auto;
        margin-right: 15px;
    }

    #nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
        background: #224d6f;
    }

    #nav li.on ul {
        display: block;
    }

    #nav li.off:hover ul, #nav li.over ul {
        display: block;
        z-index: 6000;
    }

    #nav li.off a:hover, #nav li.on a:hover { 
        color: #f90;
    }

    /*do the image replacement*/

    #nav li span {
        position: absolute;
        left: -9384px;
    }

    #liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
        display: block;
        position: relative;
        height: 26px;
        background: url(bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
    }

/*first, put the initial states in place*/

#liRenaissance a {
    background-position: 0 0;
}

#liArtNouveau a {
    background-position: -102px 0;
}

#liModern a {
    background-position: -204px 0;
}

#liPostModern a {
    background-position: -306px 0;
}

#liDigital a {
    background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liModern.on a {
    background-position: -204px -37px;
 } /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
    background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
    background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
    background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
    background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
    background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
    display: block;
    background: #224d6f;
    color: #fff;
    font-family: arial, verdana, sans-serif;
    font-size: small;
}       

#nav li.on ul a {
    background: #f90;
}


    </style>
</head>





<body>
<div id="divNav">
    <ul id="nav">
    <li id="liRenaissance" class="off"><a href="#"><span>Renaissance</span></a>
    <ul>
        <li><a href="#">Brunelleschi</a></li>
        <li><a href="#">Alberti</a></li>
        <li><a href="#">Palladio</a></li>
        <li><a href="#">Michelangelo</a></li>
        <li><a href="#">Bramante</a></li>
    </ul></li>
    <li id="liArtNouveau" class="off"><a href="#"><span>Art Nouveau</span></a>
    <ul>
        <li><a href="#">Mackintosh</a></li>
        <li><a href="#">Guimard</a></li>
        <li><a href="#">Horta</a></li>
        <li><a href="#">van de Velde</a></li>
    </ul></li>
    <li id="liModern" class="on"><a href="#"><span>Modern</span></a>
    <ul>
        <li><a href="#">Sullivan</a></li>
        <li><a href="#">Le Corbusier</a></li>
        <li><a href="#">Mies</a></li>
        <li><a href="#">Gropius</a></li>
        <li><a href="#">Yamasaki</a></li>
    </ul></li>
    <li id="liPostModern" class="off"><a href="#"><span>Postmodern</span></a>
    <ul>
        <li><a href="#">Venturi</a></li>
        <li><a href="#">Eisenman</a></li>
        <li><a href="#">Stern</a></li>
        <li><a href="#">Graves</a></li>
        <li><a href="#">Gehry</a></li>
    </ul></li>
    <li id="liDigital" class="off"><a href="#"><span>Digital</span></a>
    <ul>
        <li><a href="#">Xenakis</a></li>
        <li><a href="#">Lynn</a></li>
        <li><a href="#">Diller+Scofidio</a></li>
        <li><a href="#">Zellner</a></li>
        <li><a href="#">Hadid</a></li>
    </ul></li>
</ul></div>
</body>
</html>

it will design horizontal menus with vertical sub menus.

How to create horizontal main menus with vertical sub menus by using asp.n

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers