Fatal编程技术网
  • html/
  • Html 需要所有子菜单位于第一导航选项下；最后一个子菜单选项具有不同的宽度

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

html css jquery-mobile

Html 需要所有子菜单位于第一导航选项下；最后一个子菜单选项具有不同的宽度,html,css,jquery-mobile,nav,submenu,Html,Css,Jquery Mobile,Nav,Submenu,因此，这里有两个问题： 第一：因此我想制作一个导航结构，其中第一个ul树是一个正常的水平导航条，第二个ul树是一个位于第一个ul树的第一个选项下方的单个垂直导航条（基本上，子菜单的所有部分都位于同一位置，一旦激活另一个子菜单，就会替换上一个子菜单） 我已经让它在这里的基础上工作，尽管我认为必须有一种比我选择的手动调整右元素更好的方法，特别是因为我需要它来匹配多个屏幕大小（例如，包括iPad）[我正在使用jQuery Mobile] Second:所有子菜单中的最后一个li的宽度比其他li的宽度长

因此，这里有两个问题：

第一：因此我想制作一个导航结构，其中第一个ul树是一个正常的水平导航条，第二个ul树是一个位于第一个ul树的第一个选项下方的单个垂直导航条（基本上，子菜单的所有部分都位于同一位置，一旦激活另一个子菜单，就会替换上一个子菜单）

我已经让它在这里的基础上工作，尽管我认为必须有一种比我选择的手动调整右元素更好的方法，特别是因为我需要它来匹配多个屏幕大小（例如，包括iPad）[我正在使用jQuery Mobile]

Second:所有子菜单中的最后一个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>
谢谢

更新：JSFiddle:

如果希望所有子菜单在左侧对齐，则将它们相对于主顶部
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
上定义宽度

我尝试在小提琴上运行您的代码，但子菜单没有出现？您是否缺少任何外部资源可以链接？抱歉@Douglas我忘记了JavaScript，并修复了原始代码中的一些错误。请查看帖子中的新JSFIDLE。您最后一个li项的宽度差异是由jquery mo造成的bile应用
.ui导航栏li:最后一个子项.ui btn{右边距：-4px；}
#navbar > ul {
    position: relative;
}

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