html - CSS/Jquery 下拉子菜单定位糟糕

Question

$(document).ready(function () {
       $("ul.dropdown li").hover(function()
        {

            $(this).addClass("hover");
            $('ul:first',this).css('visibility', 'visible');

        }, function(){

            $(this).removeClass("hover");
            $('ul:first',this).css('visibility', 'hidden');

        });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

    })

    $(document).on('click', 'ul#soleSubMenu li a', function () {
        $('span#sole').text($(this).attr('data-sole'));
        $('ul#soleSubMenu li a').removeClass('active');
        $(this).addClass('active');

    });

    $(document).on('click', 'ul#dualTF li a', function () {
        $('span#dual').text($(this).attr('data-dual'));
        $('ul#dualTF li a').removeClass('active');
        $(this).addClass('active');

    });

    $(document).on('click', 'ul#friendZN li a', function () {
        $('span#fz').text($(this).attr('data-fz'));
        $('ul#friendZN li a').removeClass('active');
        $(this).addClass('active');

    });

ul.dropdown { 
        list-style: none;
        position: relative;
        padding: 0px 0 10px 0;
    }

    ul.dropdown li  { 
        float: left; 
        margin: 0px 10px 7px 0;
    }

    ul.dropdown li a { 
        display: block;
        font-size: 11px;
    }

    ul.dropdown li.hover,
    ul.dropdown li:hover { 
        position: relative; 
    }

    ul.dropdown ul  { 
        visibility: hidden; 
        position: absolute;  
        list-style: none;
    }

    ul.dropdown ul li { 
        font-weight: normal;  
        float: left;
    }

    /* IE 6 & 7 Needs Inline Block */
    ul.dropdown ul li a { 
        display: inline-block; 
    } 
    ul.subMenu li a {text-algin: left;}
    ul.subMenu li a.active  { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div>
    <ul class="dropdown">
        <li><a href="#">Sole: <span id="sole">Me</span></a>
            <ul class="subMenu" id="soleSubMenu">
                <li><a href="#" data-sole="Me">Me</a></li>
                <li><a href="#" data-sole="Mine" class="active">Mine</a></li>
            </ul>
        </li>
        <li><a href="#">Dual: <span id="dual">Yours</span></a>
            <ul class="subMenu" id="dualTF">
                <li><a href="#" data-dual="Yours" class="active">Yours</a></li>
                <li><a href="#" data-dual="Ours">Ours</a></li>
            </ul>
        </li>
        <li><a href="#">Friendzone: <span id="fz">New York</span></a>
            <ul class="subMenu" id="friendZN">
                <li><a href="#" data-fz="New York" class="active">New York</a></li>
                <li><a href="#" data-fz="London">London</a></li>
                <li><a href="#" data-fz="Singapore">Singapore</a></li>
                <li><a href="#" data-fz="Cannes">Cannes</a></li>
            </ul>
        </li>
    </ul>

大家节日快乐!

所以我有一个包含 1 到 4 个子菜单项的三主题菜单。这只是使用无序列表和列表项的文本菜单。我有两件事的问题。

1. 子菜单项定位未排列在父项下，如果有超过 1 个子菜单项，则其他项未排列在第一个子菜单项下。

2. 如果较长的菜单项下面有内容，它就会溢出顶部，文本变得难以辨认。因此，要么我需要在它后面有一个白色背景，可能是指向父菜单项的箭头之类的东西，以便将其封装，要么将其下方的内容向下推。

Here is the fiddle link

这是我的 CSS:

    ul.dropdown {         list-style: none;        position: relative;        padding: 0px 0 10px 0;    }    ul.dropdown li  {         float: left;         margin: 0px 10px 7px 0;    }    ul.dropdown li a {         display: block;        font-size: 11px;    }    ul.dropdown li.hover,    ul.dropdown li:hover {         position: relative;     }    ul.dropdown ul  {         visibility: hidden;         position: absolute;          list-style: none;    }    ul.dropdown ul li {         font-weight: normal;          float: left;    }    /* IE 6 & 7 Needs Inline Block */    ul.dropdown ul li a {         display: inline-block;     }     ul.subMenu li a {text-algin: left;}    ul.subMenu li a.active  { display:none }

Here is my HTML:

<div>
    <ul class="dropdown">
        <li><a href="#">Sole: <span id="sole">Me</span></a>
            <ul class="subMenu" id="soleSubMenu">
                <li><a href="#" data-sole="Me">Me</a></li>
                <li><a href="#" data-sole="Mine" class="active">Mine</a></li>
            </ul>
        </li>
        <li><a href="#">Dual: <span id="dual">Yours</span></a>
            <ul class="subMenu" id="dualTF">
                <li><a href="#" data-dual="Yours" class="active">Yours</a></li>
                <li><a href="#" data-dual="Ours">Ours</a></li>
            </ul>
        </li>
        <li><a href="#">Friendzone: <span id="fz">New York</span></a>
            <ul class="subMenu" id="friendZN">
                <li><a href="#" data-fz="New York" class="active">New York</a></li>
                <li><a href="#" data-fz="London">London</a></li>
                <li><a href="#" data-fz="Singapore">Singapore</a></li>
                <li><a href="#" data-fz="Cannes">Cannes</a></li>
            </ul>
        </li>
    </ul>
</div>

这是我的 JS:

$(document).ready(function () {
       $("ul.dropdown li").hover(function()
        {

            $(this).addClass("hover");
            $('ul:first',this).css('visibility', 'visible');

        }, function(){

            $(this).removeClass("hover");
            $('ul:first',this).css('visibility', 'hidden');

        });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

    })

    $(document).on('click', 'ul#soleSubMenu li a', function () {
        $('span#sole').text($(this).attr('data-sole'));
        $('ul#soleSubMenu li a').removeClass('active');
        $(this).addClass('active');

    });

    $(document).on('click', 'ul#dualTF li a', function () {
        $('span#dual').text($(this).attr('data-dual'));
        $('ul#dualTF li a').removeClass('active');
        $(this).addClass('active');

    });

    $(document).on('click', 'ul#friendZN li a', function () {
        $('span#fz').text($(this).attr('data-fz'));
        $('ul#friendZN li a').removeClass('active');
        $(this).addClass('active');

    });

为了完整性，我包含了 JS，因为我觉得这可能是一个纯粹的 CSS 问题。任何帮助将不胜感激:)

Answer 1

ul.dropdown ul li {
 float:none;
}

.ul.dropdown ul {
  padding-left:0;
}

这对我来说已经解决了

你 li 不需要 float ，你在 ul 上有一个巨大的填充。您可以使用 chrome 检查工具来查看并更好地了解发生了什么。如果您有任何其他问题，请不要犹豫

这是你修改过的 jsfiddle:https://jsfiddle.net/458Lh40a/1/