CSS/Jquery Dropdown Submenu Positioning Horrible

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>

Happy Holidays Everyone!

So I have a three topic menu with between 1 and 4 submenu items. This is just text menu using an unordered list and list items. I am having issues with two things.

1. Submenu item positioning is not lined up under the parent item and if there is more then 1 submenu item the other items are not lined up under the first submenu item.

2. If there is content below the longer menu item it just flows over top and the text becomes illegible. So either I need a white background behind it maybe something like an arrow pointing to the parent menu item so its encapsulated or push the content below it down.

Here is the fiddle link

Here is my 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>

Here is my 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');

    });

I included the JS for completeness as my feeling this is likely a pure CSS issue. Any help would be greatly appreciated :)

Answer 1

ul.dropdown ul li {
 float:none;
}

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

this fixed it for me

You li does not need to be floating and you have a huge padding on the ul. You can use chrome inspect tools to see this and better understand what is going on. If you have any additional questions, don't hesitate

Here is your jsfiddle modified : https://jsfiddle.net/458Lh40a/1/