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菜单下水平显示子菜单，在第一个主菜单项目下面开始全部左侧。

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

List<IWebElement> createGifs = driver.FindElements(By.XPath("//img[@ src='images/document_create.gif']"));是选择器。

如果您使用Chrome或Firefox，请使用元素检查器通过右键单击html并选择选项来查找唯一的CSS路径。

编辑：你应该让问题更具描述性。 Idk你的意思是水平子菜单.....

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>设置水平子菜单的样式

3 个答案: