html - 如何使下拉菜单正确运行？

Question

我正在尝试做一个向左弹出的下拉菜单，但不仅第一个内联下拉菜单向左弹出，而且顶部与具有 drop down 的相应元素不对齐。 .

其余的下拉菜单相互重叠。不仅如此，我还希望“时刻”的宽度与下拉菜单相同。

HTML代码:

                 <nav class="submenu" id="submenu">
                <ul class="submenu">
                <li id="main"><a href="main-index.html" title="Main">Main</a></li>
                <li id="opinions"><a href="opinions.html" title="Opinion Page">Opinions</a></li>
                <li id="characters"><a href="table.html" title="Character Sheet">Characters</a></li>
                <li id="quotes"><a href="dl.html" title="Quotes">Quotes</a></li>
                <li id="moments"><a href="/" onclick="return false;" title="Crowning Moments">Moments</a>
                    <ul class="submenu">
                        <li id="funny_moment"><a href="funny.html" title="Moments of Funny">Funny</a></li>
                        <li id="tearjerker_moment"><a href="tearjerker.html" title="Moments of Tearjerker">Tearjerker</a></li>
                        <li id="awesome_moment"><a href="heartwarming.html" title="Moments of Heartwarming">Heartwarming</a></li>
                        <li id="heartwarming_moment"><a href="awesome.html" title="Moments of Awesome">Awesome</a></li>
                        <li id=""><a href="/" onclick="return false;" title="Other Moments">Other</a>
                            <ul class="submenu">
                                <li><a href="/" onclick="return false;" title="Fridge">Fridge</a>
                                    <ul class="submenu">
                                        <li id="fridge_logic"><a href="/" onclick="return false;" title="Fridge Logic">Logic</a></li>
                                        <li id="fridge_brilliance"><a href="/" onclick="return false;" title="Fridge Brilliance">Brilliance</a></li>
                                        <li id="fridge_horror"><a href="/" onclick="return false;" title="Fridge Horror">Horror</a></li>
                                        <li id="fridge_heartwarming"><a href="/" onclick="return false;" title="Fridge Heartwarming">Heartwarming</a></li>
                                    </ul>
                                </li>
                                <li><a href="/" onclick="return false;" title="Fuels">Fuel</a>
                                    <ul class="submenu">
                                        <li id="fuel_nightmare"><a href="/" onclick="return false;" title="Nightmare Fuel">Nightmare</a></li>
                                        <li id="fuel_nausea"><a href="/" onclick="return false;" title="Nausea Fuel">Nausea</a></li>
                                        <li id="fuel_fetishism"><a href="/" onclick="return false;" title="Fetishism Fuel">Fetishism</a></li>
                                    </ul>
                                </li>
                                <li><a href="/" onclick="return false;" title="Fails">Fail</a>
                                    <ul class="submenu">
                                        <li id="fail_nightmare"><a href="/" onclick="return false;" title="Nightmare Fail">Nightmare</a></li>
                                        <li id="fail_nausea"><a href="/" onclick="return false;" title="Nausea Fail">Nausea</a></li>
                                        <li id="fail_fetishism"><a href="/" onclick="return false;" title="Fetishism Fail">Fetishism</a></li>
                                    </ul>
                                </li>
                                <li id="scene"><a href="/" onclick="return false;" title="Scene">Scene</a></li>
                                <li id="awesome_music"><a href="/" onclick="return false;" title="Awesome Music">Awesome Music</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

以及 CSS 代码:

/***** div *****/
.menu {
    margin: auto;
}

/***** submenu *****/
#menu {
    font-family: "Courier New", Courier, monospace;
    font-size: 1.1em;
    list-style-type: none; /*bullet removel*/
    list-style: none; /*bullet removel*/
    text-decoration: none; /*bullet removel*/
    padding-bottom: 1.1em;
}

ul.submenu {
    width: 80%;
    margin: auto;
    text-align:center;
}

ul.submenu li {
    display: inline;
    position: relative;
    margin-top: 3px;
}

#moments  li {
    width: 241px;
}

ul.submenu li a {
    padding: 5px 8px;
    display: inline-block;
    color: #000000;
    background-color: #fdfdfa;
    border: 2px solid #dab175;
    border-radius: 7.5px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    transition: all 0.1s;
}

ul.submenu li:hover > a {
    color: #000000;
    background-color: #fdfdfa;
    border: 2px solid #955e33;
    border-radius: 7.5px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
}

/***** Drop-Down submenu *****/
ul.submenu li:hover > ul {
    visibility:visible;
    opacity:1;
}

ul.submenu ul, ul.submenu ul li ul {
    margin: 0;
    padding: 0;    
    visibility:hidden;
    position: absolute;
    z-index: 99999;
    width: inherit;
    opacity:0;
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
    -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
    transition:opacity 0.2s linear, visibility 0.2s linear;     
}

ul.submenu ul {
    position: absolute;
    left: 0px;
}

#moments {
    width: 241px;
}

ul.submenu ul li ul {
   position: absolute;
   left: -240px;
}

ul.submenu ul li a {
    padding:5px 8px;
    color:#000000;
    text-decoration:none;
    display:inline-block;
    float:right;
    width:220px;
}

ul.submenu ul li ul li a {
    float: right;
    right: 0;
    top: 0;
}

ul.submenu ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}

ul.submenu ul li ul li a:hover {
    float: right;
    left: 0;
    top: 0;
}

Answer 1

它工作正常。但是 250px 是静态的。

.ul li ul{
   position: absolute;
   left: 250px;
}

替换您的 .ul li ul {} 样式。