1

私は今、Web開発、特にCSSに取り掛かろうとしていますが、シンプルなメニューバーという実用的なことをしたいと思っていました。ただし、サブメニューのアンカーは1行ではなく2行になるため、適切にフォーマットする際に問題があります。

HTMLコードは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
    </head>
    <body>
        <ul id="menu">
            <li><a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Submenu 1</a></li>
                    <li><a href="#">Submenu 2</a></li>  
                    <li><a href="#">Submenu 3</a></li>
                    <li><a href="#">Submenu 4</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
        </ul>
    </body>
</html>

そしてCSSコード：

#menu{ 
    list-style: none;
    padding: 0px;
    margin: 0px;
    }
#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
    position: relative;
}
#menu li ul{
    position: absolute;
    list-style: none;
    right: 0;
    display: none;
}
#menu li li{
    float: none;
}
#menu li:hover ul{
    display: block;
}
4

3 に答える 3

1

ここにいくつかのオプションがあります...

CSSを次のように変更すると、サブメニュー全体が他のメインメニュー項目の下に表示されます。

#menu{ 
    list-style: none;
    padding: 0px;
    margin: 0px;
    }
#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
}
#menu li ul{
    list-style: none;
    right: 0;
    display: none;
    width: 100%;
    position: absolute;
}
#menu li li{
    float: none;
    width: 100%;
    display: block;
}
#menu li:hover ul{
    display: block;
}​

このオプションは、トップメニュー項目をスライドさせます。これは理想的ではないかもしれませんが、オプションです...

#menu{ 
    list-style: none;
    padding: 0px;
    margin: 0px;
    }
#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
}
#menu li ul{
    list-style: none;
    right: 0;
    display: none;
    position: relative;
    width: 100%;
}
#menu li li{
    float: none;
    width: 100%;
    display: block;
}
#menu li:hover ul{
    display: block;
}​
于 2012-07-26T23:34:36.793 に答える
0

liテキストが収まるようにの幅を増やします。

于 2012-07-26T23:32:25.087 に答える
0

のを設定するだけwidthです#menu li。

#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
    position: relative;
    width: 80px;
}

デモをお試しください。

于 2012-07-26T23:33:43.887 に答える