如何使用嵌套 <ul> 设置水平子菜单的样式

Question

我想不通。如何使用 css 设置此菜单的样式。我需要设置 .mainNav2 的样式，但是模板构建的菜单是这样的：

<ul class="mainNav1">
   <li><a href="#">1</a></li>
   <li><a class="current level_1" href="#">2</a></li>
   <li>
     <ul class="mainNav2">
       <li><a href="#">a</a></li>
       <li><a href="#">b</a></li>
       <li><a href="#">c</a></li>
    </ul>
  </li>
  <li><a href="#">3</a></li>
</ul>

我想要一个水平菜单，子菜单在 mainNav1 菜单下水平，从左开始，在第一个主菜单 li-item 下。

css:

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

ul.mainNav1 li{float:left;
display: inline;
margin: 0;  
padding: 0;}

ul.mainNav1 li a{
font-family:'Playfair Display', serif;
font-size:20px;
text-decoration: none;
display: block;
color:#666;
margin-right:20px;}

ul.mainNav2{position:absolute; width:600px; margin:30px 0 0 -100px;}
ul.mainNav2 li{float:left; background:url(bg-menu.png) repeat;}
ul.mainNav2 li:first-child{border-radius:5px 0 0 5px;}
ul.mainNav2 li:last-child{border-radius:0 5px 5px 0;}
ul.mainNav2 li a{font-size:15px;}
ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }
ul.mainNav1 a:hover{color: #f7ccaf; }
ul.mainNav1 a.current { font-style:italic; color:#a7a7a7;}

Answer 1

ul li ul.mainNav2 是选择器。

如果您使用 Chrome 或 firefox，请使用元素检查器找到唯一的 CSS 路径，方法是右键单击 html 并选择选项。

编辑：你真的应该让问题更具描述性。不知道你说的水平子菜单是什么意思.....

Answer 2

根据我从你的问题中所理解的内容，我认为我有你的解决方案。

ul.mainNav2{position:absolute; width:600px; margin:30px 0 0 -100px;}

改为

ul.mainNav2{position:absolute; width:600px; margin:30px 0 0 -125px;}

这是你想要的吗？

Answer 3

这是您要找的吗？

已更新以反映您的 css。

http://jsfiddle.net/jralvarez28/ezLu0482/3/

ul.mainNav1{
position: relative;
list-style-type: none;
margin:0;
padding: 0;}

ul.mainNav1 li{
display: inline-block;
margin: 0;  
padding: 0;}

ul.mainNav1 li a{
font-family:'Playfair Display', serif;
font-size:20px;
text-decoration: none;
display: block;
color:#666;
margin-right:20px;}

ul.mainNav2{position:absolute; width:600px; top: 100%; left: 0; padding: 0;}
ul.mainNav2 li{float:left; background:url(bg-menu.png) repeat;}
ul.mainNav2 li:first-child{border-radius:5px 0 0 5px;}
ul.mainNav2 li:last-child{border-radius:0 5px 5px 0;}
ul.mainNav2 li a{font-size:15px;}
ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 4px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }
ul.mainNav1 a:hover{color: #f7ccaf; }
ul.mainNav1 a.current { font-style:italic; color:#a7a7a7;}

诀窍是

ul.mainNav1 {
position: relative;
}

ul.mainNav2 {
position: absolute;
top: 100%;
left: 0;
}

这会将 .mainNav2 放在 .mainNav1

的正下方

如何使用嵌套 <ul> 设置水平子菜单的样式

how to style a horizontal submenu with nested <ul>

html

css

menu