需要所有子菜单位于第一个导航选项下；最后一个子菜单选项有不同的宽度

Question

所以，这里有两个问题：

First: 所以我想制作一个导航结构，其中 first ul 树是一个普通的水平导航栏，second ul 树是位于 first ul 树的第一个选项下方的单个垂直导航栏（基本上子菜单的所有部分都位于同一位置, 替换之前的子菜单 ul 一旦激活另一个子菜单）。

我已经让它在此处的基本级别上工作，但我认为必须有比我选择的手动调整 right 元素，特别是因为 我需要它来匹配多个屏幕尺寸 （包括，例如 iPad 屏幕尺寸[我正在使用 jQuery 手机])。

第二个：所有子菜单中的最后一个li（除了最后一个，无论出于何种原因）都有更长的宽度比其他 li 的 .

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!--Normal CSS Stylsheets-->
    <link rel="stylesheet" type="text/css" href="includes/css/style.css">

    <!--jQuery Mobile Stylesheets-->
    <link rel="stylesheet" type="text/css" href="includes/jQueryMobile/jquery.mobile-1.4.5.min.css">

    <!--FooTable CSS-->
    <link rel="stylesheet" type="text/css" href="includes/FooTable-2/css/footable.core.css">
    <link rel="stylesheet" type="text/css" href="includes/FooTable-2/css/footable.metro.css">

    <!--jQuery Library-->
    <script src="includes/jQuery/jquery-1.11.3.min.js"></script>

    <!--jQuery Mobile Library-->
    <script src="includes/jQueryMobile/jquery.mobile-1.4.5.min.js"></script>

    <!--Footable jQuery-->
    <script src="includes/FooTable-2/js/footable.js"></script>
    <script src="includes/FooTable-2/js/footable.sort.js"></script>
    <script src="includes/FooTable-2/js/footable.filter.js"></script>
    <script src="includes/FooTable-2/js/footable.paginate.js"></script>

    <!--General Javascript-->
    <script src="includes/js/general.js"></script>

</head>
<body>   
    <div data-role="page" data-theme="a" id="home">


        <div data-role="header" data-position="fixed">
<nav id="navbar" data-role="navbar">
    <ul>
        <li><a href="#">Real-Time</a>
            <ul>
                <li><a href="#">Choice 1</a></li>
                <li><a href="#">Choice 2</a></li>
                <li class="lastFirstNav"><a href="#">Choice 3</a></li>
            </ul>
        </li>
        <li><a href="#" class="pageChange">Database Functions</a>
            <ul class="secondNav">
                <li><a href="#">Another Choice 1</a></li>
                <li><a href="#">Another Choice 2</a></li>
            </ul>
        </li>
        <li><a href="#" class="pageChange">Settings/Configuration</a>
            <ul class="thirdNav">
                <li><a href="login.php">Logout</a></li>
                <li><a href="#">A Third Choice 2</a></li>
                <li><a href="#">A Third Choice 3</a></li>
                <li><a href="#">A Third Choice 4</a></li>
            </ul>
        </li>
    </ul>
</nav>
</div>


        <div data-role="main" class="ui-content">

        </div>

        <div data-role="footer" data-position="fixed">
            <h1>
                Home
            </h1>
        </div>

    </div>
</body>
</html>

CSS:

#navbar ul ul {
    display: none;
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}

#navbar ul ul li {
    float: left;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
    width: 100%;
    height: 100%;
}

#navbar ul ul.secondNav li 
{
    right: 100%;
}


#navbar ul ul.thirdNav li
{
    right: 200.5%;
}

    #navbar ul ul li a.active {
        background: #4b545f;
    }

#navbar ul ul ul {
    position: absolute; 
    left: 100%; 
    top: 0;
}

#navbar ul li.active > ul { 
        display: block;
    }

#navbar ul li { 
    float: left;
}

#navbar ul li.active {

    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

#navbar ul li a {
    display:block; 
    padding: 25px 40px; 
    text-decoration: none;
}

谢谢。

更新：JSFiddle：https://jsfiddle.net/LLx7vgjo/3/

Answer 1

如果您希望所有子菜单都在左侧排列，则将它们相对于主顶部 ul 而不是子菜单 li.

定位

#navbar > ul {
    position: relative;
}

 #navbar ul ul {
    display: none;
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto; 
}

至于宽度，子菜单的宽度只会达到它们需要的宽度 (width:auto) 以包含各种 li 和链接。

每个子菜单都会有所不同，因为这些链接的内容会因内容而异。

如果您想要一致性，请在子菜单上定义宽度 ul。

JSFiddle Demo

需要所有子菜单位于第一个导航选项下；最后一个子菜单选项有不同的宽度

Need all submenus to reside under first nav option; last submenu option has different width

html

css

jquery-mobile

nav

submenu