jQuery下拉列表工作在<span>但不是<p>标记</p> </span>

Question

我遇到了我创建的jQuery驱动的下拉列表的问题。下拉列表可以与任何<span>标记完美匹配，但是一旦您在下拉列表中包含<p>标记，它就会完全停止工作。

以下是JSFiddle的一个示例： http://jsfiddle.net/WXBeG/2/

HTML

<p><span class="dropdown">Dropdown                
    <ul class="dropdown-menu border-radius">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Log out</a></li>
    </ul>
</span> 
</p>

<span class="dropdown">Dropdown 2            
    <ul class="dropdown-menu border-radius">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Log out</a></li>
    </ul>
</span>

CSS

.dropdown {
    cursor: pointer;
    outline: none;
    position: relative;
    width: auto;
}
.dropdown .dropdown-menu {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: inherit;
    font-weight: inherit;
    left: 0;
    margin-left: 0px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-transform: none;
    z-index: 99999;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.dropdown .dropdown-menu a {
    text-decoration: none;
}
.dropdown .dropdown-menu p {
    margin: 0;
    padding: 10px 15px;
}
.dropdown .dropdown-menu span {
    line-height: inherit;
}
.dropdown ul.dropdown-menu {
    list-style-type: none;
}
.dropdown .dropdown-menu li {
    display: block;
    padding: 5px 10px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.dropdown .dropdown-menu li:hover {
    background-color: #f3f8f8;
}
.dropdown.dropdown-active .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}
@media (min-width: 48em) {
    .dropdown .dropdown-menu {
        width: 200px;
    }
}

的jQuery

function DropDown(el) {
    this.dd = el;
    this.initEvents();
}

DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        // Determine if dropdown is on hover or on click
        $(".dropdown-hover").mouseenter(function (event) {
            $(this).addClass("dropdown-active");
            event.stopPropagation();
        });

        $(".dropdown-hover .dropdown-menu").mouseleave(function () {
            $(".dropdown").removeClass("dropdown-active");
        });

        // Toggle .dropdown-active on click
        obj.dd.on('click', function (event) {
            event.stopPropagation();
            $(this).toggleClass('dropdown-active');
        });

    }
}

$(function () {
    var dd = new DropDown($('.dropdown'));

    $(document).click(function () {

        // Remove class from all dropdowns
        $('.dropdown').removeClass('dropdown-active');
    });
});

此问题是否可能来自浏览器应用于<p>标记的某些默认样式？