メニュー作成例

<img width="375" alt="F0F66AEA-A8B8-4D02-897E-C2F36E8CD646.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374799/9c77e01f-c87c-9923-553a-d172ee6f512d.png">
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Common.Master.cs" Inherits="ContosoUniversity.CommonMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/SiteSample.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    <script runat="server">    
        protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
        {
            Session["url"] = e.Item.Value;
            Response.Redirect(e.Item.Value);
        }

        protected void Menu1_Load(object sender, EventArgs e)
        {
            object obj = Session["url"];
            if (obj != null)
            {
                foreach (MenuItem item in NavigationMenu.Items)
                {
                    if (item.Value == (string)obj)
                    {
                        item.Selected = true;
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form runat="server">
        <div class="page">
            <div class="header">
                <div class="title">
                    <h1>Contoso University
                    </h1>
                </div>
                <div class="loginDisplay">
                    <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                        <AnonymousTemplate>
                            [ <a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server">Log In</a>
                            ]
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            Welcome <span class="bold">
                                <asp:LoginName ID="HeadLoginName" runat="server" />
                            </span>! [
                        <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"
                            LogoutPageUrl="~/" />
                            ]
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
                <div class="clear hideSkiplink">
                    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
                        IncludeStyleBlock="false" Orientation="Horizontal"
                        OnMenuItemClick="Menu1_MenuItemClick"
                        OnLoad="Menu1_Load">
                        <StaticSelectedStyle BackColor="#FF99FF" CssClass="menu" />
                        <Items>
                            <asp:MenuItem Value="~/Default.aspx" Text="宿カセットパンフレット選択一覧" />
                            <asp:MenuItem Value="~/ASample.aspx" Text="宿カセット掲載一覧" />
                        </Items>
                    </asp:Menu>
                    <asp:Menu ID="Menu1" runat="server" CssClass="menu"
                        IncludeStyleBlock="false" Orientation="Horizontal"
                        OnMenuItemClick="Menu1_MenuItemClick"
                        OnLoad="Menu1_Load">
                        <StaticSelectedStyle BackColor="#FF99FF" />
                        <Items>
                            <asp:MenuItem Value="~/Default.aspx" Text="宿カセットテンプレート選択" />
                            <asp:MenuItem Value="~/ASample.aspx" Text="基本プラン選択" />
                            <asp:MenuItem Value="~/ASample.aspx" Text="施設情報" />
                            <asp:MenuItem Value="~/ASample.aspx" Text="画像選択" />
                            <asp:MenuItem Value="~/ASample.aspx" Text="カレンダー・旅行代金確認" />
                        </Items>
                    </asp:Menu>
                                        <asp:Menu ID="Menu2" runat="server" CssClass="menu"
                        IncludeStyleBlock="false" Orientation="Horizontal"
                        OnMenuItemClick="Menu1_MenuItemClick"
                        OnLoad="Menu1_Load">
                        <StaticSelectedStyle BackColor="#FF99FF" CssClass="menu" />
                        <Items>
                            <asp:MenuItem Value="~/Default.aspx" Text="食事条件" />
                            <asp:MenuItem Value="~/ASample.aspx" Text="JRセットプラン" />
                            <asp:MenuItem Value="~/ASample.aspx" Text="割引情報" />
                            <asp:MenuItem Value="~/ASample.aspx" Text="食付けプラン" />
                            <asp:MenuItem Value="~/ASample.aspx" Text="部屋GUPプラン" />
                        </Items>
                    </asp:Menu>
                </div>
            </div>
            <div class="main">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>
            <div class="clear">
            </div>
        </div>
        <div class="footer">
            20190721 made by dmf
        </div>
    </form>
</body>
</html>


<%@ Page Title="About Us" Language="C#" MasterPageFile="~/Common.master" AutoEventWireup="true"
    CodeBehind="ASample.aspx.cs" Inherits="ContosoUniversity.ASample" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>Student Body Statistics</h2>
   
</asp:Content>


/* DEFAULTS
----------------------------------------------------------*/

body {
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
    width: 100%;
}

a:link, a:visited {
    color: #034af3;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #034af3;
}

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1 {
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 1.5em;
    font-weight: 600;
    height: 26px;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    background-color: #fff;
    margin: 20px 2% auto 2%;
    border: 1px solid #496077;
}

.header {
    position: relative;
    margin: 0px;
    padding: 0px;
    /*background: #4b6c9e;*/
    width: 100%;
}

    .header h1 {
        font-weight: 700;
        margin: 0px;
        padding: 0px 0px 0px 20px;
        /* color: #f9f9f9;*/
        border: none;
        line-height: 2em;
        font-size: 2em;
    }

.main {
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol {
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer {
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink {
    /*background-color:#3a4f63;*/
}

div.menu {

            width: 100%;
}

    div.menu ul {
        list-style: none;

    }

        div.menu ul li {
            width: 250px;
            padding: 0;
        }

            div.menu ul li a, div.menu ul li a:visited {
                background-color: #bfcbd6;
                border: 1px #4e667d solid;
                color: #034af3;
                display: block;
                line-height: 1.35em;
                padding: 4px 20px;
                /*text-decoration: none;*/
                white-space: nowrap;
                text-align: center;
            }

                div.menu ul li a:hover {
                    background-color: #1f50c4;
                    color: #000000;
                    text-decoration: none;
                }

                div.menu ul li a:active {
                    background-color: #465c71;
                    color: #cfdbe6;
                    text-decoration: none;
                }

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset {
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

    fieldset p {
        margin: 2px 12px 10px 10px;
    }

    fieldset.login label, fieldset.register label, fieldset.changePassword label {
        display: block;
    }

    fieldset label.inline {
        display: inline;
    }

legend {
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry {
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry {
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo {
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear {
    clear: both;
}

.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

    .loginDisplay a:link {
        color: white;
    }

    .loginDisplay a:visited {
        color: white;
    }

    .loginDisplay a:hover {
        color: white;
    }

.failureNotification {
    font-size: 1.2em;
    color: Red;
}

.bold {
    font-weight: bold;
}

.submitButton {
    text-align: right;
    padding-right: 10px;
}