个人中心
gpt4 book ai didi

html - 嵌套时 li 元素的文本重叠

转载 作者：太空宇宙 更新时间：2023-11-04 15:16:08 25 4
gpt4 key购买 nike

我正在尝试使用 CSS/HTML 创建一个菜单栏，悬停时会在列表元素中触发。当我尝试将列表排列成两列时遇到问题。

这是示例代码:http://jsfiddle.net/Km922/1/ 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style media="all">
        .navigation ul
        {
            margin: 0px;
            padding: 0px;
            list-style: none;
            left: 300px;
            position: relative;
            top: 200px;
        }
        .navigation ul li ul .second
        {
            float: right;
            width: 200px;
            position: relative;
            overflow: hidden;
        }
        .navigation li
        {
            float: left;
            height: 30px;
            margin-left: 15px;
            margin-right: 15px;
            position: relative;
            top: 30px; /*clear:left;*/
        }
        .navigation li a
        {
            text-decoration: none;
        }
        .navigation li a:hover
        {
            text-decoration: underline;
        }
        .navigation li ul
        {
            margin: 0px;
            padding: 0px;
            position: absolute;
            left: -9999px;
            height: 30px;
            top: 30px; /*display:inline-block;*/
        }
        .navigation li:hover ul
        {
            left: 0;
            width: 160px;
            visibility: visible;
        }
        .header-container
        {
            background: url(Images/nav-bg4.png) repeat-x scroll 0 0 transparent;
            height: 136px;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 901;
        }
        #apDiv1
        {
            position: absolute;
            width: 200px;
            height: 115px;
            z-index: 902;
            top: 29px;
        }
        .navigation ul li ul .first
        {
            float: left;
            width: 200px;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>
<body background="Images/global-splash-map.jpg">
    <header class="header-container">
  <div id="apDiv1"><img src="Images/levis-logo.png" /></div>
</header>
    <div class="navigation">
        <ul>
            <li><a href="#">menu1</a>
                <ul>
                    <li class="second">Canada</li>
                    <li class="first">United States</li>
                    <li class="second">Mexico</li>
                </ul>
            </li>
            <li><a href="#">menu2</a>
                <ul>
                    <li class="second">Argentina</li>
                    <li class="second">Brazil</li>
                    <li class="second">Bolivia</li>
                    <li class="second">Chile</li>
                    <li class="second">Colombia</li>
                    <li class="second">Ecuador</li>
                    <li class="first">Panama</li>
                    <li class="first">Paraguay</li>
                    <li class="first">Peru</li>
                    <li class="first">Uruguay</li>
                    <li class="first">Venezuela</li>
                </ul>
            </li>
            <li><a href="#">menu3</a>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                    <li>sub menu item 3</li>
                    <li>sub menu item 4</li>
                </ul>
            </li>
            <li><a href="#">menu3</a>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                    <li>sub menu item 3</li>
                    <li>sub menu item 4</li>
                </ul>
            </li>
            <li><a href="#">menu4</a>
                <ul>
                    <li>sub menu item 1</li>
                    <li>sub menu item 2</li>
                    <li>sub menu item 3</li>
                    <li>sub menu item 4</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

当您将鼠标悬停在 menu1 上时，它显示完美，但是当您将鼠标悬停在 menu2 上时，我看到应该出现在每一行中的列表元素出现并相互重叠。谁能帮我解决这个问题？

最佳答案

你有几个问题。首先， float 和绝对定位不兼容:

.navigation ul li ul .first {
    float: left;
    position: absolute;
}

接下来，您不能像这样堆叠列表项并将它们分成两列。这不是花车的工作方式。 

<ul>
  <li class="second">Argentina</li>
  <li class="second">Brazil</li>
  <li class="second">Bolivia</li>
  <li class="second">Chile</li>
  <li class="second">Colombia</li>
  <li class="second">Ecuador</li>
  <li class="first">Panama</li>
  <li class="first">Paraguay</li>
  <li class="first">Peru</li>
  <li class="first">Uruguay</li>
  <li class="first">Venezuela</li>
</ul>

没有特定 HTML 的多列列表是一个挑战。这是一篇可以帮助您入门的文章:http://alistapart.com/article/multicolumnlists

关于html - 嵌套时 li 元素的文本重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14990439/

25 4 0
文章推荐： C++ 错误 : "size" declared as function returning a function
文章推荐： jquery - 从 jQuery Validation 插件定位消息
文章推荐： java - 更改 java 区域设置
文章推荐： html - 微博 : how to make div wrap around photo?
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com