0

ナビゲーションソリューションを変換して、ドロップダウンメニューを正確で簡潔な方法で含めるようにいくつかのことを試みましたが、100％機能させることができないようです。以下は私のCSSとHTMLであり、誰かが私に説明してくれることを願っています。私は自分では実装できないようです。ナビゲーション項目にカーソルを合わせたときにドロップダウンメニューを表示し、リンクをアクティブにする方法です。

ページ名は疑似コードであるため、目前の主題には関係ないため、気にしないでください。

<div id="page">
        <a class="topNavigationLink" href="http://1.com">1</a>
        <a class="topNavigationLink" href="2.html">2</a>
        <a class="topNavigationLink" href="3.html">3</a>
        <a class="topNavigationLink" href="4.html">4</a>
        <a class="topNavigationLink" href="5.html">5</a>
        <a class="topNavigationLink" href="6.html">6</a>
        <a class="topNavigationLink" href="7.html" >7</a>
 </div>

#page
{
  display: block; 
  height:auto;
  position: relative; 
  overflow: hidden; 
  width: 938px;
padding:8px 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
background: url(background.png) center 0px;
}

a.topNavigationLink
{
text-align:center;
font-weight:bold;
margin-top:0px;
font-size:20px;
padding:18px 23.4px; /*modify this value to change link size*/
float:left;
background-color:black;
//clear:left;
text-decoration:none;
color:#FFFFFF;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
box-shadow: 0px 0px 10px rgba(0,0,0,0.8);
}

a.topNavigationLink:hover
{
color:DodgerBlue;
background-color:white;
box-shadow: 0px 10px 10px #00CC66;
}
4

1 に答える 1

1

まず、ナビゲーションブロックをマークアップするために、順序付けされていないリストを使用する必要があります。あなたの場合、これは次のようになります。

<div id="page">
     <nav>
         <ul>
             <li><a href="http://1.com">1</a></li>
             …
         </ul>
     </nav>
     …
 </div>

ナビゲーションの基礎として使用できる簡単な例を次に示します。http：//dabblet.com/gist/4291211

于 2013-01-13T04:39:17.250 に答える