Question

我有一个菜单和面板（在这里演示http://jsfiddle.net/vals/j2LrQ/1/），面板取决于所选菜单。问题是，当我把鼠标转到面板它消失，我无法从中选择一个值..然后我需要知道如何使菜单的背面颜色作为菜单全屏显示:)

body {
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    margin: 10px auto;
    padding: 0;  
}
.container {
    float:left;
    width:100%;
    background:#113388;
    margin: 0 auto;
}

ul#topnav {
   margin: 0; padding: 0;
   float: left;
   list-style: none;
   font-size: 1.2em;
   background: #113388;
   position:relative;
   left:30%;
   text-align:center;
}
ul#topnav li {
   float: left;
   margin: 0; padding: 0;
   border-right: 1px solid #555;
   right:30%;
}
ul#topnav li a {
   padding: 10px 15px;
   display: block;
   color: #f0f0f0;
   text-decoration: none;
   text-align:center;
}

ul#topnav li span {
    padding: 15px 0;
    position: absolute;
                left: 0; top:60px;
                display: none;
                text-align:Center;
                width: 100%;
                background: #558ED5;
                color: #fff;
                -moz-border-radius: 0 0 5px 5px;
                -webkit-border-radius: 0 0 5px 5px;
            }
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

Answer 1

下拉菜单的工作方法是将鼠标悬停在某个按钮上，这又会导致操作发生。如果两者之间有空白区域，则在远离它时取消操作。这意味着你要做的事情在实践中无法完成。除非你想“假装”它，否则下面的解决方案是最好的。如果你没有解决方案1那就是。如果没有转到解决方案2。

解决方案1 

您需要删除主导航栏和二级导航栏之间的间隙，同时删除一些内容，例如浮动左侧和左侧anf右侧30％并添加显示内联块修复宽度问题：

http://jsfiddle.net/j2LrQ/5/

    body {
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    margin: 10px auto;
    padding: 0;  
}
.container {
    float:left;
    width:100%;
    background:#113388;
    margin: 0 auto;
}

ul#topnav {
   margin: 0; padding: 0;

   list-style: none;
   font-size: 1.2em;
   background: #113388;
   position:relative;
   text-align:center;
}
ul#topnav li {
   display: inline-block;
   margin: 0; padding: 0;
   border-right: 1px solid #555;

}
ul#topnav li a {
   padding: 10px 15px;
   display: block;
   color: #f0f0f0;
   text-decoration: none;
   text-align:center;

}

ul#topnav li span {
    padding: 15px 0;
    position: absolute;
                left: 0; top: 100%;
                display: none;
                text-align:Center;
                width: 100%;
                background: #558ED5;
                color: #fff;
                -moz-border-radius: 0 0 5px 5px;
                -webkit-border-radius: 0 0 5px 5px;
            }
ul#topnav li:hover span { display: block;}
ul#topnav li span a { display: inline;  }
ul#topnav li span a:hover {text-decoration: underline; }

解决方案2

如果您将按钮创建为图像（这可能是在photoshop或gimp或任何图像编辑软件中）按钮将完全按照您已创建的按钮完成，但在按钮下方，您将使用空白区域加倍空间。这将使ILLUSION在第一个导航栏和第二个导航栏之间存在空白区域。

Answer 2

您可以通过我们的HTML略微更改来获得您想要的效果：

<div class="container">
    <ul id="topnav">
        <li ><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a>
                <div class="wrapper">
                    <div class="sec-nav">
                    <a href="#">What We Do</a>
                    <a href="#">Our Process</a>
                    <a href="#">Testimonials</a>
                    </div>
                </div>
        </li>
        <li><a href="#">Portfolio</a>
            <div class="wrapper">
                <div class="sec-nav">
                <a href="#">Web Design</a>
                <a href="#">Analytics</a> |
                <a href="#">Database Design</a>
                </div>
            </div>
        </li>
        <li><a href="#">Contact</a></li>
     </ul>
</div>

只需在包含链接的块周围添加一个包含块div.wrapper。

按如下方式调整CSS：

ul#topnav li div.wrapper {
    padding-top: 40px; /* controls the gap between the menus */
    position: absolute;
    left: 0; 
    top: 33px; /* Add just enough height to clear the text links in top nav */
    display: none;
    text-align:Center;
    width: 100%;
    color: #fff;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}
ul#topnav li:hover div.wrapper { 
    display: block; 
    background-color: yellow; /* to show the spacing created by the wrapper */
}
ul#topnav li div.sec-nav {
    background: #558ED5;
}
ul#topnav li div.sec-nav a {
    display: inline-block; 
}
ul#topnav li a:hover {text-decoration: underline;}

您可以在http://jsfiddle.net/audetwebdesign/cjTym

查看工作演示

如何运作

基本上，为top调整div.wrapper，使其与顶部导航重叠一两个像素。这样，当您将鼠标从顶部导航块移开时不会失去焦点。

在div.wrapper中添加一些顶部填充，以在两个菜单之间创建白色（黄色）空间。

最后，将背景颜色应用于包裹链接的.sec-nav块。

其他一切都是一样的，所以你应该全力以赴。

<强>除了

我使用<div>代替<span>来包装链接，依此类推。或者，如果将显示类型更改为阻止，则可以使用span元素。

无法从面板中选择值

2 个答案: