Question

我尝试使用HTML和CSS为网页创建菜单。显示菜单时会出现那些讨厌的子弹。我不想要他们。我如何摆脱它们？

此外，子菜单需要允许可变长度的字符串。我必须为width: 80px;元素指定.dropdown li属性。如果我没有，所有的菜单都会被挤压在一起。

对于子菜单，如果我有这么长的李：

<li><a href="#">Most Popular Artists</a></li>

显示的所有内容都是＆＃34; Most＆＃34;。

所以我需要解决两件事：摆脱子弹，并使子菜单处理可变长度的字符串。

enter image description here

HTML：

<nav id="top_menu">
<img src="media/images/logo_large.jpg">
  <ul class="dropdown">
    <li class="dropdown_trigger">
      <a href="#">NEWS</a>
      <ul>
        <li><a href="#">Subitem1</a></li>         
        <li><a href="#">Subitem2</a></li>         
        <li><a href="#">Subitem3</a></li>         
        <li><a href="#">Subitem4</a></li>
      </ul>
    <li>
    <li class="dropdown_trigger">       
      <a href="#">SOCIAL</a>
      <ul>
        <li><a href="#">Subitem1</a></li>         
        <li><a href="#">Subitem2</a></li>         
        <li><a href="#">Subitem3</a></li>         
        <li><a href="#">Subitem4</a></li>
      </ul>
    </li>
  </ul> 
</nav>

CSS：

#top_menu{
 position: relative;
 top:35px;
 left: 90px;
 width:660px;
 height:55px;
 background-color: black;
 border:1px solid black;
 opacity:0.6;
 filter:alpha(opacity=60); /* For IE8 and earlier */
}
.dropdown {
background: black;
border: 1px solid black;
float: right;
padding: 1px 0 0 1px;
margin: 0 0 20px;
line-height: 55px;
}

.dropdown a {
background: black repeat-x;
border: 1px solid black;
border-top-width: 0;
color: white;
display: block;
line-height: 25px;
overflow: hidden;
text-decoration: none;
height: 25px;
}

.dropdown a:hover {
color: #30B3FF;
background: #666;
}

.dropdown ul a {
background: black;
}

.dropdown > li {
list-style: none;
position: relative;
text-align: left;
font: bold 12px Tahoma; 
*display: inline-block;
width: 80px;
/* IE7 hack to make inline-block work right */
*zoom: 1;
display: inline;

}

.dropdown li.dropdown_trigger {

display: inline;
float: left;
margin: 0 0 0 -1px;
}

.dropdown ul {
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}

.dropdown ul {
display: none;
}

.dropdown li.dropdown_trigger:hover ul {
display: block;
}

Answer 1

您应该将list-style-type: none;添加到主ul CSS中，如下所示：

.dropdown ul {
list-style-type: none;
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}

.dropdown ul {
display: none;
}

看着你可以巩固这两个项目＆amp;格式化它们以便于阅读：

.dropdown ul {
  display: none;
  list-style-type: none;
  background: black;
  border: 1px solid black;
  border-top-width: 0;
  position: absolute;
  top: 26px;
  left: -1px;
  z-index: 9999;
}

过去你甚至可以添加!important来强制覆盖：

.dropdown ul {
  display: none;
  list-style-type: none !important;
  background: black;
  border: 1px solid black;
  border-top-width: 0;
  position: absolute;
  top: 26px;
  left: -1px;
  z-index: 9999;
}

Answer 2

将list-style:none;添加到您的unordered (bulleted)列表中以隐藏默认的项目符号。将此角色应用于ul，这样您就不必每次都将其应用于每个ul.class。

ul {
    list-style:none;
    padding:0;
    margin:0;
}

为什么菜单子弹出现在我的菜单上？

2 个答案: