如何在菜单的列中显示几个选项
如何在菜单的列中显示几个选项
提问于 2013-04-01 02:53:46
我想在这个网站上做一个菜单：http://www.accenture.com/us-en/pages/index.aspx ex。外包。使用css和html可以做到这一点。我不能创建带有列的"li“或"ul”。
我的代码
<body>
<style type="text/css">#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:12px;
font-weight:bold;
color:8e8e8e;
}
#cssmenu ul{
background:url(menu_assets/images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 8px 0px 8px;
}
#cssmenu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:underline;
}
#cssmenu li ul{
background:#e0e0e0;
border-left:1px solid #0079b2;
border-right:1px solid #0079b2;
border-bottom:1px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:600px;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
#cssmenu p{
clear:left;
}
#cssmenu .active > a{
background:url(menu_assets/images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
</style>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li><a href='#'><span>Product 3</span></a></li>
<li><a href='#'><span>Product 3</span></a></li>
<li class='last'><a href='#'><span>Product 4</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;"> </div>
</body>当然，我在网上搜索，但我找不到解决方案。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-01 08:16:45
特定选择器
首先，当您使用诸如#cssmenu ul或#cssmenu li之类的CSS规则时，该CSS规则将应用于主菜单和子菜单的HTML标记。一些样式可能会应用到不需要应用它们的元素。为了避免这种可能的混淆，可以在更多的>选择器中使用CSS子组合器。例如：
#cssmenu > ul {...} // Only applied to main menu
#cssmenu > ul > li {...} // Only applied to main menu li tags
#cssmenu > ul > li > a {...} // Only applied to main menu links
#cssmenu ul ul {...} // No confusion here, since menu isn't 3 levels deep
#cssmenu ul ul li {...} // No confusion here, only applied to submenu li tags
#cssmenu ul ul li a {...} // No confusion here, only applied to submenu links浮动菜单项
其次，如果您正在模仿Accenture menu，在页面右侧显示可变宽度菜单项的最快方法是将菜单项浮动到左侧，同时将整个菜单浮动到右侧。
#cssmenu > ul { float: right; ... }
#cssmenu > ul > li { float: left; ... }
...
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a> ... </li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>有时，将父级和子级向相反的方向浮动是有问题的。如果这样做有任何困难，最安全的选择是将菜单项浮动到右侧。在这种情况下，为了让它们以正确的顺序显示，您必须颠倒HTML源代码中菜单项的顺序。
#cssmenu > ul > li { float: right; ... }
...
<ul>
<li class='last'><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a> ... </li>
<li class='active'><a href='index.html'><span>Home</span></a></li>
</ul>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15733203
复制相关文章
相似问题
腾讯云开发者
