-4

我有一个简单的水平导航菜单，它使用高度风格的锚点作为按钮。现在，最后一个名为“store”的按钮有一个内容列表，通过这个 jquery 悬停效果变得可见。

我无法让“商店”按钮与其他按钮对齐。现在两天，我正在尝试float:left margin 50% whatever, position:incorrect, overflow:I-forget-what, clear:both, 以及各种俗气的 hack，我正处于 CSS 定位的那个阶段，您开始认真考虑使用表格重新构建布局。

与其把我的灵魂卖给桌子，我想我最好还是请有经验的人看看：

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

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

4

3 回答 3

2

此代码应该可以工作：

我在您的菜单中添加了一个固定宽度的包装 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>
于 2012-06-07T21:21:14.223 回答
0

那个菜单看起来很糟糕，老实说，并没有你注意到的那么大的灵活性。

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

这是丑陋的修复

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

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

在这种情况下，您可能应该回到基础知识并重新学习如何制作正确的菜单。如果这是在某些内容管理系统中，则覆盖类和模板以使其易于添加...

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

于 2012-06-07T21:19:28.780 回答
0

您需要修复两件事才能正确显示按钮并使子菜单正常运行：

请参阅此工作小提琴示例！

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;
}
于 2012-06-07T21:20:29.200 回答