Html 多级ul li菜单问题_Html_Css

Html 多级ul li菜单问题

html css

Html 多级ul li菜单问题,html,css,Html,Css,我通过ul和li制作了一个多级菜单，但第二级文本分成两行，如下图所示：注意：我不能对二级菜单（li2类）使用静态宽度，因为文本大小在此级别是动态的，可以是一个单词或多个单词 HTML: <body> <div class="top"> <ul class="ul1"> <li class="li1">home</li> <li class="li1">

我通过

ul

和

li

制作了一个多级菜单，但第二级文本分成两行，如下图所示：

注意：我不能对二级菜单（

li2类

）使用静态宽度，因为文本大小在此级别是动态的，可以是一个单词或多个单词

HTML:

<body>
    <div class="top">
        <ul class="ul1">
            <li class="li1">home</li>
            <li class="li1">accessories
                    <ul class="ul2">
                        <li class="li2">cases and protectors
                            <ul class="ul3">
                                <li class="li3"><a href="#">case 1</a></li>
                                <li class="li3"><a href="#">case 2</a></li>
                            </ul>
                        </li>
                    </ul>
            </li>
        </ul>
    </div>
</body>

这是一个活生生的问题，我做错了什么？

一个快速解决方案是添加

空白：nowrap到类为.li2
的元素：
nowrap
与正常情况一样折叠空白，但不显示换行符
（文本换行）在文本中

正文{
方向：rtl；
保证金：0；
}
.顶{
位置：固定；
排名：0；
右：0；
左：0；
高度：48px；
}
.ul1{
填充：0；
边距：0自动0自动；
显示：表格；
高度：48px；
列表样式：无；
背景色：#bdbd；
}
李先生1{
填充：0 20px 0 20px；
保证金：0；
线高：48px；
浮动：对；
边框：实心1px#FFF；
位置：相对位置；
}
.li1:hover.ul2{
显示：块；
}
.ul2{
填充：0；
保证金：0；
列表样式：无；
背景色：#ffd800；
显示：无；
位置：绝对位置；
顶部：49px；
宽度：自动；
左：0；
溢出：隐藏；
}
李先生2{
填充：0；
保证金：0；
高度：48px；
宽度：自动；
线高：48px；
背景色：#808080；
显示：块；
空白：nowrap；
}
.ul3{
显示：无；
}


主页
附件

箱子和保护装置










一个快速解决方案是添加空白：nowrap到类为.li2
的元素：
nowrap
与正常情况一样折叠空白，但不显示换行符
（文本换行）在文本中

正文{
方向：rtl；
保证金：0；
}
.顶{
位置：固定；
排名：0；
右：0；
左：0；
高度：48px；
}
.ul1{
填充：0；
边距：0自动0自动；
显示：表格；
高度：48px；
列表样式：无；
背景色：#bdbd；
}
李先生1{
填充：0 20px 0 20px；
保证金：0；
线高：48px；
浮动：对；
边框：实心1px#FFF；
位置：相对位置；
}
.li1:hover.ul2{
显示：块；
}
.ul2{
填充：0；
保证金：0；
列表样式：无；
背景色：#ffd800；
显示：无；
位置：绝对位置；
顶部：49px；
宽度：自动；
左：0；
溢出：隐藏；
}
李先生2{
填充：0；
保证金：0；
高度：48px；
宽度：自动；
线高：48px；
背景色：#808080；
显示：块；
空白：nowrap；
}
.ul3{
显示：无；
}


主页
附件

箱子和保护装置










好吧，你想实现什么？我将在一行中实现“案例和保护器”，并在该行中延伸li。好吧，你想实现什么？我将在一行中实现“案例和保护器”，并在该行中延伸li
body {
    direction: rtl;
    margin: 0;
}

.top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 48px;
}

.ul1 {
    padding: 0;
    margin: 0 auto 0 auto;
    display: table;
    height: 48px;
    list-style: none;
    background-color: #bdbdbd;
}

.li1 {
    padding: 0 20px 0 20px;
    margin: 0;
    line-height: 48px;
    float: right;
    border: solid 1px #FFF;
    position: relative;
}

    .li1:hover .ul2 {
        display: block;
    }

.ul2 {
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #ffd800;
    display: none;
    position: absolute;
    top: 49px;
    right: 0;
    width: auto;
}

.li2 {
    padding: 0;
    margin: 0;
    height: 48px;
    width: auto;
    line-height: 48px;
    background-color: #808080;
    display: block;
}
.ul3
{
    display:none;    
}