Question

我有一个简单的水平导航菜单，它使用高风格的按钮来固定按钮。现在，名为“store”的最后一个按钮有一个内容列表，通过此jquery悬停效果可以看到。

我无法让“商店”按钮与其余部分对齐。两天，我正在尝试float:left margin 50% whatever，position:incorrect，overflow:I-forget-what，clear:both，以及各种俗气的黑客攻击，我正处于CSS的那一点定位你开始认真考虑使用表格重新构建布局。

不要把我的灵魂卖给桌子，我想我最好只是请一位经验更丰富的人来看看：

http://www.ideagasms.net/ideagasms-with-dropdown-menu.html

在查看源代码时，您会注意到我在主要元素旁边添加了大量注释，因此应该很容易快速理解所有内容。谢谢。：）

Answer 1

此代码应该有效：

我在菜单中添加了一个包装div，其宽度固定，并以页面为中心。然后将每个标签添加到li中。

你的jQuery菜单现在已经破了，但它应该只是在dom中订单发生变化时再次找到正确元素的情况。

您可能还需要创建一些新样式并再次将它们添加到元素中。因为我可能搞砸了几位。我建议添加适当的类和id，以便将来不会遇到样式问题。

<div id="nav">
 <ul>
  <li>
      <a alt="STORE" class="navmenu faded" href="http://www.ideagasms.net/ideagasms-products/">STORE</a>
    <ul class="file_menu">
      <li><a href="#file">File</a></li>
      <li><a href="#edit">Edit</a></li>
      <li><a href="#view">View</a></li>
      <li><a href="#insert">Insert</a></li>
      <li><a href="#modify">Modify</a></li>
      <li><a href="#control">Control</a></li>
      <li><a href="#debug">Debug</a></li>
      <li><a href="#window">Window</a></li>
      <li><a href="#help">Help</a></li>
    </ul>
  </li>
  <li><a alt="HOME" class="navmenu faded" href="http://www.ideagasms.net/link">HOME</a>     </li>
  <li><a alt="VIDEO" class="navmenu faded" href="http://www.ideagasms.net/link">VIDEO</a> </li>
  <li><a alt="ABOUT" class="navmenu faded" href="http://www.ideagasms.net/link">ABOUT</a></li>
  <li><a alt="CONTACT" class="smcf-link navmenu faded">CONTACT</a></li>
  <li><a alt="DONATIONS" class="navmenu scroll faded" href="http://www.ideagasms.net/link">DONATIONS</a></li>
  <li><a alt="MENTORING" class="navmenu faded" href="http://www.ideagasms.net/link">MENTORING</a></li>
  <li><a alt="BEAUTY" class="navmenu faded" href="http://www.ideagasms.net/link">BEAUTY</a></li>
  <li><a alt="SNIPPETS" class="navmenu scroll faded" style="letter-spacing:1px" href="http://www.ideagasms.net/link">#iG</a></li>
</ul>
</div>


<style type="text/css"> 


#buttonnav {  
float:left;
height: 25px;
width: 100px;
margin-bottom:1cm;
position:relative;
z-index:9; 
}
#nav {
  margin: auto;
  width: 740px;
  background: orange;
}
ul {
  margin: auto;
}
ul li {     
    display: inline;
    float: left;

}

.menu_class {
    border:1px solid #1c1c1c;
}

ul.file_menu {
    cursor:pointer;
    display:none;
    width:260px;
    border: 1px solid #1c1c1c;
    margin:0; 
    padding:0; 
    list-style:none;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

</style>

Answer 2

该菜单看起来很残忍，说实话，并没有像你注意到的那样灵活多变。

如果我是你，我会以适当的html结构与（嵌套）li结构一起重建它，这样你就可以鞭打那个额外的项目和子菜单......

这是丑陋的修复

#buttonnav {
    display: inline-block;
    /* remove the float & widht */
}

.hoverli ul.file-menu {
    position:absolute;
}

在这种情况下，您应该回到基础并重新学习如何制作正确的菜单。如果这是在某些内容管理系统中，则覆盖类和＆amp;制作模板，以便您轻松添加内容......

我缺少子菜单的东西也是position: absolute;（你可能希望父菜单子菜单是相对的）。

Answer 3

您需要修复两件事以正确显示按钮并使子菜单起作用：

请参阅此working Fiddle Example！

1）

设置按钮的css，如：

#buttonnav {
    display: inline-block;
    height: 25px;
    position: relative;
    z-index: 9;
}

注意： display:inline-block;进入，float，margin和width离开。

2）

调整子菜单的css以允许它在不破坏布局的情况下显示：

<强> CSS

.hoverli {
    position: relative;
    z-index: 1;
}
.hoverli ul {
    position:absolute;
}

“头发拉”并排漂浮div

3 个答案:

1）

2）