メニュー


解説

CSSでメニューを作ることができます。

次の例はメニューを作るためのCSSの例です。


    nav ul{
        display: table;
        margin: 0 auto;
        padding: 0 ;
        width: 80%;
        text-align: center;
    }
    
    nav li{
        display: table-cell;
        min-width: 160px;
    }
    
    nav a{
        display: block;
        width: 100%;
        text-decoration: none;
        color: darkolivegreen;
        padding-bottom: 5px;
    }
    
    nav li:hover{
        color: yellow;
        border-bottom: 4px solid lawngreen;
    }
  

HTMLは例えば次のようにします。


  <nav>
    <ul>
    <li>
        <a href="./index.html">CSSインデックス</a>
    </li>
    <li>
        <a href="./background-color.html">背景色</a>
    </li>
    <li>
        <a href="./color.html">color属性</a>
    </li>
    <li>
        <a href="../about.html">このサイトについて</a>
    </li>
    </ul>
  </nav>
  


CSS目次 inserted by FC2 system