html - 使用 CSS 和 HTML 在标题中显示悬停和元素对齐的元素

Question

我的页面顶部有一个全宽的粘性 header 。在此标题上， Logo 位于左侧，导航菜单位于中间，搜索图标位于最右侧。

我希望在将鼠标悬停在搜索图标上时弹出一个窗口。只要鼠标指针位于弹出窗口内或搜索图标上方，我希望弹出窗口保持可见。

我还希望在我的小搜索图标的最右边有我的弹出窗口的最右边。

HTML 代码:

<header id="header">
    <div class="container_header clearfix">

            <div class="menu-row-top clearfix">

            <div class="header-logo">
                <a href="http://www.mywebsite.com">
                    <img src="/small_logo.png" alt="logo" height="44" width="210">
                </a>
            </div>

            <!-- NAVIGATION -->
            <nav class="primary">
                  <?php wp_nav_menu( array(
                    'container'       => 'ul', 
                    'menu_class'      => 'sf-menu', 
                    'menu_id'         => 'topnav',
                    'depth'           => 0,
                    'theme_location' => 'header_menu' 
                    )); 
                  ?>
                </nav><!--.primary-->


            <div class="header-search">
                <a class="search"><img src="/search_icon.png" alt="search_icon" height="28" width="28"></a>
                    <div class="header-search-form">
                        This is the search form
                    </div>
            </div>

    </div>
</header>

CSS 代码:

.container_header{
background: #0459b5; 
}

.menu-row-top {
    margin: 0 auto; 
    max-width: 960px;
   height:44px;
}

.header-logo{
float: left;
display:block;
}

nav.primary {
  position: relative;
  z-index: 2;
  display: block;
  float: left;
  margin-left: 20px;
}

.header-search{
float:right;
display:block;
margin-top:7px;
margin-left: 12px;
}

.header-search-form{
    display:none;
    position: fixed;
    top: 44px;
    background: white;
    width: 400px;
    border-bottom: solid 4px #036dda;
    height: 80px;
}


a.search:hover + .header-search-form{
display: block;
}

使用上面的代码，当我的鼠标悬停在搜索图标上时，会出现带有搜索表单的弹出窗口，但如果我将鼠标悬停在搜索表单上，则不会保持可见。为此，我希望获得正确的 CSS 标记。

此外，弹出窗口从搜索图标的左侧一直对齐到屏幕的右侧。我试着调整一下位置(左、右)，但它似乎将窗口一直发送到屏幕的两个极端，这两个极端超出了 960px 宽度。我还希望窗口始终保持在同一位置，无论我如何调整浏览器窗口的大小(即从搜索图标的右侧从右到左对齐)。

Answer 1

我设法让你的弹出窗口正常工作我在你的 CSS 中编辑了这些 http://jsfiddle.net/ce1j6k7k/3/

.header-search-form {
z-index:1000;
display:none;
position: fixed;
top: 44px;
background: green;
width: 400px;
border-bottom: solid 4px #036dda;
height: 80px;
}
.header-search:hover  .header-search-form {
display: block;
}

我给了一个更高的 z-index 值，这样它就永远在最前面