浮动我的下拉导航栏

-1

我有一些问题让我的导航栏工作。以下是我的导航栏所需的输出：example。浮动我的下拉导航栏

我试图让用户在悬停导航栏的顶层时显示下拉列表。

但是，我的导航栏的第二级只是浮动。我如何设计它？

这是我的HTML：

<div id="menubar"> 
    <ul id="menu"> 
     <li class="selected"><a href="">Home</a></li> 
     <li><a href="">Volunteers</a> 
     <ul> 
     <li><a href="">Add</a></li> 
     <li><a href="">View</a></li> 
     <li><a href="">Update</a></li> 
     </ul> 
     </li> 
     <li><a href="">Packaging Session</a> 
     <ul> 
     <li><a href="">Add</a></li> 
     <li><a href="">View</a></li> 
     <li><a href="">Update</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div>

这是我的CSS：

#menubar 
{ width: 900px; 
    height: 72px; 
    padding: 0; 
    background: #1293EE;} 

ul#menu, ul#menu li 
{ float: left; 
    margin: 0; 
    padding: 0;} 

ul#menu li 
{ list-style: none;} 

ul#menu li a 
{ letter-spacing: 0.1em; 
    font: normal 100% arial, sans-serif; 
    display: block; 
    float: left; 
    height: 37px; 
    padding: 29px 26px 6px 26px; 
    text-align: center; 
    color: #FFF; 
    text-transform: uppercase; 
    text-decoration: none; 
    background: transparent;} 

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover 
{ color: #FFF; 
    background: #0D66A5;} 

ul#menu li ul li a 
{ 
display: none; 
height: auto; 
margin: 0; 
padding: 0; 
position:absolute; 
}

谷歌浏览器：

enter image description here

在Internet Explorer中：

enter image description here

来源

2013-12-12 I Was So Lost

我不确定我能否看到与C＃的连接。你能澄清吗？ – Baldrick

对不起，我添加了错误的标签。它应该是html –

你应该把一个jsfiddle，用你的最新版本的代码显示问题。在IE中，我不会在你的图片中使用你发布的HTML/CSS。 – ANeves

而是在下拉列表中隐藏的每a标签，而隐藏整个ul，并用它作为位置元素，风格li的和a的任何其他元素。

例子：http://jsfiddle.net/gd2SX/

查找区域，写着 “样式添加”。

来源

2013-12-12 13:58:15 Kao

但是，当我使用谷歌浏览器浏览时，导航栏被搞乱了。当我使用Firefox浏览时，下拉菜单根本不显示。而在IE中，下拉上浮？ –

它在我的IE和Chrome中看起来是一样的。我会说你应该重新开始，尽管我用我的小提琴技巧。 – Kao

HTMLDog做了一个非常有趣和全面的浮动菜单文章：Sons of Suckerfish。

您会对the part about dropdowns特别感兴趣，尤其是the sample they provide。

它会帮助你纠正更多的不仅仅是你的浮动问题。

为了您的具体问题，我建议你禁用的菜单隐藏，款式应有尽有看起来完美的，因为如果所有的子菜单都敞开着，然后重新激活子的隐藏：

/* Lists directly inside list-items. */ 
li>ul { 
    display: none; 
} 
/* Lists directly inside hovered list-items. */ 
li:hover>ul, 
li.selected>ul { 
    display: block; 
}

然后你会发现它更容易修复。

来源

2013-12-12 14:16:21 ANeves

查看更新的部分 –

浮动我的下拉导航栏

回答

相关问题