Question

＆＃13;

$(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(" &raquo; ");

    })

    $(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');

    });

＆＃13;

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 }

＆＃13;

<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>

＆＃13;

祝大家节日快乐！

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

子菜单项目定位未在父项目下排列，如果有超过1个子菜单项目，则其他项目不在第一个子菜单项目下排列。
如果长菜单项下面有内容，它只会在顶部流动，文字会变得难以辨认。所以要么我需要一个白色的背景，可能就像一个指向父菜单项的箭头，所以它被封装或推下它下面的内容。

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 }

这是我的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(" &raquo; ");

    })

    $(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;
}

这为我修好了

你不需要浮动，你在ul上有一个巨大的填充。您可以使用chrome检查工具查看此信息并更好地了解正在进行的操作。如果您有任何其他问题，请不要犹豫

以下是您修改的jsfiddle：https://jsfiddle.net/458Lh40a/1/

CSS / Jquery下拉子菜单定位可怕

1 个答案: