Question

以下代码生成页面右侧的菜单，我需要该菜单位于页面右下方的特定位置。

<html>
<head>
    <title>Dropdown menu</title>
    <style type="text/css">
        body {
            padding: 3em;
        }

        #menu * {
            font: 10px;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #menu {
            float: right;
            line-height: 5px;
            margin-top: 585px;
        }

        #menu a {
            color: #ffffff;
            display: block;
            text-decoration: none;
        }

        #menu a:hover {
            background: #7A7A7A;
        }

        #menu ul li ul li a:hover {
            background: #AAA7A7;
            border-left: solid 1px #000;
            padding-left: 9px;
        }

        #menu ul li ul li {
            background: #7A7A7A;
            border: none;
            padding-bottom: 3px;
            padding-left: 3px;
            padding-right: 3px;
            padding-top: 3px;
            width: 120px;
        }

        #menu ul li ul li a {
            font: 11px arial;
            font-variant: small-caps;
            font-weight: normal;
            padding-bottom: 3px;
            padding-top: 3px;
            position: relative;
        }

        #menu ul li {
            background: #383838;
            font: 14px arial;
            font-weight: bold;
            width: 126px;
        }

        #menu ul li a {
            font-weight: bold;
            padding: 15px 10px;
        }

        #menu li {
            float: left;
            position: relative;
        }

        #menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {
            display: none;
            list-style-type: none;
            width: 120px;
        }

        #menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
            display: block;
        }

        #menu:hover ul li:hover ul li:hover ul {
            border-bottom: transparent;
            font: 10px;
            margin-left: 145px;
            margin-top: -22px;
            position: absolute;
        }

        #menu:hover ul li:hover ul {
            border-bottom: transparent;
            bottom: 100%;
            font: 10px;
            margin-top: 1px;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="menu">
    <ul>
        <li>
            <center><a href="X">ARCHITECTURE</a></center>
            <ul>
                <li><a href="#">RESIDENTIAL</a></li>
                <li><a href="#">COMMERCIAL</a></li>
            </ul>
        </li>
        <li>
            <center><a href="#">INTERIORS</a></center>
        </li>
        <li>
            <center><a href="#">FURNITURE</a></center>
            <ul>
                <li><a href="#">SEATING</a></li>
                <li><a href="#">TABLES</a></li>
                <li><a href="#">CABINETS</a></li>
            </ul>
        </li>
        <li>
            <center><a href="#">ABOUT</a></center>
        </li>
        <li>
            <center><a href="#">CONTACT</a></center>
        </li>
    </ul>
</div>
</body>
</html>

您可以在此处查看它：JSFiddle

Answer 1

要从右下角指定位置，您应该使用absolute定位：

#menu { 
    position: absolute;
    bottom: 10px;
    right: 10px;
}

<强> Demo

菜单位置需要调整（从右侧开始） - 打开

1 个答案: