Jquery 如何设计一个搜索面板，如仅使用css的mashable

我正在尝试构建一个类似mashable站点的搜索面板 因此，当用户在搜索图标上悬停时，搜索面板将打开。 最初，我想用css纯方法构建它

<ul>
    <li> menu item 1</li>
    <li> menu item 2</li>
    <li> menu item 3</li>
    <li id="serach">
        search
      <ul>
        <li>
           <input type="text placeholder="search">
           <input type="submit" value="search">
        </li>
     </ul>

    </li>
</ul>

菜单项1
菜单项2
菜单项3

搜索


已更新

使用一些jQuery：


JS

$(function() {

    var nav = $('#nav');
    var search = nav.find('li.search');

    search.on('mouseover', function(event) {

        search.children().addClass('show');

    });

    nav.on('mouseleave', function(event) {

        search.children().removeClass('show');

    });

});

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 50px;
    height: 1em;
    background-color: #09A065;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

#nav > li.search {
    margin: 0;
    padding: 0;
    float: right;
    width: 1em;
    height: 1em;
    background-color: #ccc;
    position: relative;
}

#nav > li.search > div {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ccc;
    display: none;
}

#nav > li.search:hover > div {
    display: block;
}

#nav > li.search:hover:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 2000em;
    height: 1em;
    background: red;
    content: "";
}

这是基本想法（没有js）：


HTML

<ul id="nav">
    <li class="search">
        <div>
            <input type="text"/>
        </div>
    </li>
</ul>

关键是播放相对/绝对位置和显示无/块，li:悬停使用子选择器影响内部div

我希望搜索面板将保持即使用户悬停
在菜单导航本身上

这很棘手，但是使用了伪元素，你可以用不透明来隐藏它，但是它会覆盖菜单的其余部分。。。嗯。。。使用JS…
使用Javascript可能更好。也就是说，用CSS实现你想要的效果并非不可能

如果您的问题是，当将鼠标悬停在不是
li#search
但也不是另一个菜单项的部分菜单上时，下拉搜索框会消失，您可以通过将
li#search
加宽来修复它。当然，如果您不想覆盖更大范围的所有
li
都有悬停效果，这可能会导致问题。他的新问题的解决方案是覆盖
li:hover
样式以进行
li#search
，并将其应用于
li#search
中的
div
：

因此，您的HTML可能是这样的：

<li id="search">
    <div>Search</div>
    <ul>
        <li>
            <input type="text placeholder="search">
            <input type="submit" value="search">
        </li>
    </ul>
</li>

li:hover, li#search:hover div {background-color:blue;}
li#search {width:50px;padding-left:50px;}
li#search:hover {background-color:none;}
li#search div {width:50px;}
li#search > ul {width:100px;}

您可以调整这些样式以匹配您自己的站点（我本来可以这样做，但是您发布的JSFIDLE有太多的CSS需要删除）。重要的是
li#search
的有效宽度（宽度+填充）与
li#search>ul
的宽度相匹配。如果你想要一个纯css解决方案，为什么jQuery会出现在你的标签中？如何用三个仆从来实现世界统治？我想没有人会为我这么做，就像没有人会为你写代码一样！现在很难使用JSFIDLE，因为大量额外的HTML和CSS与您的问题无关。我建议把它缩小一点，使之成为相关的东西；我已经在IE10和Chrome上测试过了，它正在工作。尝试清理代码，只留下相关部分，并更具体地说明预期的行为和出现的问题。谢谢，我做了一些清理，只放了相关的代码。这个例子是有效的-但当用户在搜索界面外悬停时，搜索面板将消失，我需要的是，如果用户像mashable站点一样在导航绿色面板的其余部分悬停，搜索面板将保持不变
li:hover, li#search:hover div {background-color:blue;}
li#search {width:50px;padding-left:50px;}
li#search:hover {background-color:none;}
li#search div {width:50px;}
li#search > ul {width:100px;}