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

Question

lavanya uppala 0 Newbie Poster

13 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.....

.net

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

Dani AI

Generated 10 Months Ago

— that symptom (top bar horizontal but submenus also laying out horizontally) almost always means a global rule like li { float:left; } or display:inline-block is leaking into nested lists. is right that the ASP.NET Menu emits the structure, but the browser’s CSS wins; ’s UL/LI example is a good fallback if you want full control.

Practical steps: set the Menu’s Orientation to Horizontal and StaticDisplayLevels to 1 so only the root level is static, and give the control a stable CSS class (for example CssClass="topMenu") so you can target it reliably. Then float only the first-level items and explicitly reset nested lists so they stack vertically — example CSS (replace .topMenu with your class):

/* top row */
.topMenu > ul > li { float: left; white-space: nowrap; }

/* base positioning */
.topMenu li { position: relative; }
.topMenu li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 10rem;
  background: #fff;
  z-index: 1000;
}

/* show dropdown on hover / keyboard focus */
.topMenu li:hover > ul,
.topMenu li:focus-within > ul { display: block; }

/* ensure submenu items stack vertically */
.topMenu li ul li { float: none; display: block; }
.topMenu li ul a { display: block; }

If your Menu still renders as tables (older WebForms), those UL selectors won’t match — either use the CSS Friendly Adapters or the UL/LI markup posted and apply the same float/reset idea. Quick DevTools tip: inspect a submenu <li> and look at computed styles for an inherited float or display:inline-block; override those for nested levels (use more-specific selectors or, as last resort, !important) until the submenu stacks vertically.

All 4 Replies

JorgeM 958 Problem Solver

13 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

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers