0

我有一个菜单和面板（Demo here 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;}
4

2 回答 2

1

下拉菜单通过将鼠标悬停在按钮上来工作，这反过来会导致动作发生。如果中间有空白，则在远离它时取消动作。这意味着您尝试做的事情实际上无法完成。除非您想“伪造”它，否则下面的解决方案是最好的解决方案。如果你不解决方案1，它就是。如果没有，请继续解决方案 2。

解决方案 1

您需要删除主导航栏和第二级导航栏之间的间隙，还需要删除一些东西，例如您的浮动左侧和左侧和右侧 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 或任何图像编辑软件中），该按钮将与您已经创建的按钮完全相同，但是在按钮下方您将用空白空间加倍空间。这会给人一种错觉，即在第一个导航栏和第二个级别之间存在空白。

于 2013-06-08T23:36:55.833 回答
0

对我们的 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 元素。

于 2013-06-09T00:55:32.287 回答