Unable to make menu horizontal using css adapters RRS feed

  • Question

  • User1302700350 posted


     I'm trying to create a simple three tab horizontal menu using a sitemap and css adapters with no success.

    Each time I run the website the menu displays vertically. I can't figure this one out. Any help would be much



    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <link href="CSS/Import.css" rel="stylesheet" type="text/css" />
        <form id="form1" runat="server">
        <div id="wrapper">
            <div id="header">
                <asp:Menu ID="MainHeaderMenu" runat="server" 
                    Orientation="Horizontal" DataSourceID="SiteMapDataSource1" CssSelectorClass="HeaderMenu"  
                    MaximumDynamicDisplayLevels="1" StaticDisplayLevels="2">
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
            <div id="contentarea">
                <div id="maincontent">Main content goes here...
                    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                <div id="rightbar">Right side....</div>
        <div id="footer">
            Footer goes here...


    .HeaderMenu .AspNet-Menu-Horizontal 
        position: absolute;
        bottom: 0;
        right: 0;
    .HeaderMenu ul.AspNet-Menu li 
        background: #FF0000;
        width: 100px;


    <?xml version="1.0" encoding="utf-8" ?>
    <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
        <siteMapNode url="~/Default.aspx" title="Home"  description="">
            <siteMapNode url="~/Services.aspx" title="Services"  description="" />
            <siteMapNode url="~/ContactUs.aspx" title="Contact us"  description="" />
    Wednesday, May 21, 2008 8:23 PM

All replies

  • User-2109111975 posted

     have you tried specifying a width?  Total shot in the dark...

    Thursday, May 29, 2008 5:42 PM
  • User-558454797 posted

    I have this exact issue.  Did you ever resolve it?  If so, what did you do?  Thanks!!!

    Friday, August 22, 2008 2:08 PM
  • User1598028445 posted

    Here's the info for my horizontal menu:

    /* All link and span elements */
    .TopMenu ul.AspNet-Menu a,
    .TopMenu ul.AspNet-Menu span
        white-space: nowrap;
    /* All first level link and span elements */
    .TopMenu ul.AspNet-Menu > li > a,
    .TopMenu ul.AspNet-Menu > li > span
        color: White;
    	font-family: Verdana, Arial, sans-serif;
        font-weight: bold;
        font-size: 10px;
        padding: 5px 7px;
    /* All first level link and span elements hovered */
    .TopMenu ul.AspNet-Menu > li > a:hover,
    .TopMenu ul.AspNet-Menu > li > span:hover,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-Hover > a:hover,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-Hover > span:hover
        text-decoration: underline;
    /* All first level link and span elements when the element or one of its children is selected */
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-Selected > a,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-Selected > span,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-ChildSelected > a,
    .TopMenu ul.AspNet-Menu > li.AspNet-Menu-ChildSelected > span
    	background-color: #D8D8D8;
    	background-image: url(images/top.jpg);
    	background-repeat: repeat-x;
    	color: #186086;
    	border-top: 1px solid #A2ABB0;
    	border-left: 1px solid #A2ABB0;
    	border-right: 1px solid #A2ABB0;
    	padding: 4px 8px 5px;
    <asp:Menu ID="TopMenu" runat="server" CssSelectorClass="TopMenu"
        Orientation="Horizontal" MaximumDynamicDisplayLevels="0" />
    Friday, August 22, 2008 4:22 PM
  • User-114806852 posted

    Try the following:

    .HeaderMenu .AspNet-Menu-Horizontal
    position: relative;
    top: 10px;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    width: 400px;
    z-index: auto;
    Friday, August 22, 2008 5:23 PM