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

Question

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

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

我还想将弹出窗口的最右侧放在我的小搜索图标的最右侧。

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 值，所以它总是在最前面