4

私は CSS が初めてで、このコードを試してみようとしています。どのように見えるかを確認したい場合は、次のリンクにアクセスしてください: https://www.servage.net/blog/wp-content/uploads/2009 /03/css-menu.html コードは次のとおりです。

<html>
    <head>
        <title>CSS based drop-down menu</title> 
    <style type="text/css">

        ul {
            font-family: Arial, Verdana;
            font-size: 14px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul li {
            display: block;
            position: relative;
            float: left;
        }
        li ul { display: none; }
        ul li a {
            display: block;
            text-decoration: none;
            color: #ffffff;
            border-top: 1px solid #ffffff;
            padding: 5px 15px 5px 15px;
            background: #2C5463;
            margin-left: 1px;
            white-space: nowrap;
        }

        ul li a:hover { background: #617F8A; }
        li:hover ul { 
            display: block; 
            position: absolute;
        }
        li:hover li { 
            float: none;
            font-size: 11px;
        }
        li:hover a { background: #617F8A; }
        li:hover li a:hover { background: #95A9B1; }

    </style>        
    </head>
    <body>

        <ul id="menu">
            <li><a href="">Home</a></li> 
            <li><a href="">About</a> 
              <ul>
                <li><a href="">The Team</a></li>
                <li><a href="">History</a></li> 
                <li><a href="">Vision</a></li> 
              </ul> 
            </li> 
            <li><a href="">Products</a> 
              <ul> 
                <li><a href="">Cozy Couch</a></li> 
                <li><a href="">Great Table</a></li> 
                <li><a href="">Small Chair</a></li> 
                <li><a href="">Shiny Shelf</a></li> 
                <li><a href="">Invisible Nothing</a></li> 
              </ul> 
            </li>
            <li><a href="">Contact</a> 
              <ul> 
                <li><a href="">Online</a></li> 
                <li><a href="">Right Here</a></li> 
                <li><a href="">Somewhere Else</a></li> 
              </ul> 
            </li> 
        </ul>   

    </body>
</html>

これについて 2 つの質問があります: このナビゲーション バーをページの右側に配置するにはどうすればよいですか? 一部のタブにはドロップダウン リストがあります。この margin-top: 50px を追加すると、ナビゲーション バーの位置が変更され、ドロップダウン リストは次のように下に移動します ここに画像の説明を入力

4

4 に答える 4

8

#menuを右および下に移動するには50px、これらのプロパティを追加します

#menu {
    position: absolute;
    top: 50px;
    right: 0px;
}

JSFiddle

float代わりにandを使用する場合margin-topは、余白を#menu 

#menu {
    float: right;
    margin-top: 50px;
}

JSFiddle

于 2013-02-08T00:39:14.347 に答える
2

親ulと子ulの両方をターゲットにしているようです

それを試してください：

ul {
margin-top:50px;
}

ul#menu {
float:right;
margin-top:0;
}

ul の後に #menu を追加することで、その特定の UL を対象とするため、その基本的な ul プロパティをオーバーライドします

于 2013-02-08T00:31:29.237 に答える
0

float プロパティをリストに追加します。

#menu {
  float: right;
}
于 2013-02-08T00:30:50.203 に答える