0

非常に多くのフォーラムを読み、ナビゲーション メニューの現在のページを強調表示したままにするためにさまざまな方法を試しましたが、なぜ機能しないのかわかりません。
私は Javascript や PHP を使いたくありません - CSS だけです。

これは私がHTMLのために持っているものです:

    <body id="@ViewBag.IDTag">
        <ul id="menu">
            <li>@Html.ActionLink("Home", "Index", "Home", null, new Dictionary<string, object> { { "id", "homenav" } })</li>
            <li>@Html.ActionLink("What Is EDI?", "WhatIsEDI", "Home", null, new Dictionary<string, object> { { "id", "whatisedinav" } })</li>
            <li>@Html.ActionLink("Bills of Lading", "Index", "Bills_of_Lading", null, new Dictionary<string, object> { { "id", "billsofladingnav" } })</li>
            <li>@Html.ActionLink("Issues & Solutions", "Index", "Issues_and_Solutions", null, new Dictionary<string, object> { { "id", "issuesandsolutionsnav" } })</li>
            <li>@Html.ActionLink("Partners", "Index", "Partners", null, new Dictionary<string, object> { { "id", "partnersnav" } })</li>
            <li>@Html.ActionLink("Locations", "Index", "Locations", null, new Dictionary<string, object> { { "id", "locationsnav" } })</li>
            <li>@Html.ActionLink("Refineries", "Index", "Refineries", null, new Dictionary<string, object> { { "id", "refineriesnav" } })</li>
            <li>@Html.ActionLink("Sources", "Index", "Sources", null, new Dictionary<string, object> { { "id", "sourcesnav" } })</li>
            <li>@Html.ActionLink("Transfer Criteria", "Index", "Transfer_Criteria", null, new Dictionary<string, object> { { "id", "transfercriterianav" } })</li>
            <li>@Html.ActionLink("Transportation Methods", "Index", "Transportation_Methods", null, new Dictionary<string, object> { { "id", "transportationmethodsnav" } })</li>
            <li>@Html.ActionLink("Rack to Partner Mappings", "Index", "Rack_to_Partner_Mappings", null, new Dictionary<string, object> { { "id", "racktopartnermappingsnav" } })</li>
            <li>@Html.ActionLink("Products", "Index", "Products", null, new Dictionary<string, object> { { "id", "productsnav" } })</li>                    
        </ul>
    </body>

各ビューで、ページの上部に ID があります。ホームページの例は次のとおりです。

    @{
        ViewBag.IDTag = "home";
    }

これは私のCSSがどのように見えるかです:

    ul#menu             
    {
        font-size: .8em;
        font-weight: 600;
        color: #FFF;
        float: left;
        width: 130px;
        list-style-type: none;
        margin-top: 133px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        padding: 0; 
    }

    ul#menu a:link, ul#menu a:visited
    {
        display:block;
        font-weight:bold;
        color: #FFF;
        background-color: rgb(139,177,216);
        width: 120px;
        text-align: center;
        padding: 5px;
        text-decoration: none;
        text-transform: uppercase;
    }

    ul#menu a:hover, ul#menu a:active
    {
        background-color: #365f87;
    }

body#home a#homenav, 
body#whatisedi a#whatisedinav,
body#billsoflading a#billsofladingnav,
body#issuesandsolutions a#issuesandsolutionsnav,
body#partners a#partnersnav, 
body#locations a#locationsnav, 
body#refineries a#refineriesnav,
body#sources a#sourcesnav,
body#transfercriteria a#transfercriterianav,
body#transportationmethods a#transportationmethodsnav,
body#racktopartnermappings a#racktopartnermappingsnav,
body#products a#productsnav     
{
    background-color: #365f87;          /* highlights current page */
    text-transform: lowercase;
    cursor:default;
}

私はこれらすべてに慣れていないので、単に構文の問題であるか、「div」である必要があるときに「body」を呼び出しているか、「class」である必要があるときに「id」を呼び出している可能性があります。私は、私が試したことが何も変わらないところにいます. どんな助けでも大歓迎です。

4

2 に答える 2