Question

这是一个两部分问题。 第一部分是将鼠标悬停在应该显示嵌套ul元素的li元素上时的问题。它将其余的li标签放在嵌套的ul元素的底部。我不知道我做错了什么，但它将最初的li元素向下推。我希望有人能解释我做错了什么。 Here is the code

第二个问题我有如何创建特定具有悬停效果的li元素而不是任何嵌套的li元素？我想创建一个菜单列表，当您将鼠标悬停在文本上时会更改文本的颜色，但我不希望嵌套的li元素也具有悬停效果

HTML

   //Dynamically render the fragment layout
android:name="com.example.shailendra.colorfragment.FragmentOne" 
    //statically render the layout
            tools:layout="@layout/fragment_fragment_one"

SCSS

<div id="container">

  <ul class="list-inline">
    <li><a href="">Fire</a>
        <ul>
          <li><a href="">charmander</a></li>
          <li><a href="">magmar</a></li>
          <li><a href="">vulpix</a></li>
        </ul>
    </li>
    <li><a href="">Grass</a>
        <ul>
          <li><a href="">bulbasaur</a></li>
          <li><a href="">bellsprout</a></li>
          <li><a href="">oddish</a></li>
        </ul>
    </li>
    <li><a href="">Electric</a>
        <ul>
          <li><a href="">pichu</a></li>
          <li><a href="">magneton</a></li>
          <li><a href="">voltorb</a></li>
        </ul>
    </li>
    <li><a href="">Water</a>
        <ul>
          <li><a href="">squirtle</a></li>
          <li><a href="">poliwag</a></li>
          <li><a href="">krabby</a></li>
        </ul>
    </li>

  </ul>

</div>

Answer 1

问题1 将vertical-align:top添加到li

li {
    list-style: none;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;

  &:hover ul {
        display: block;
    }
 }

对于问题2 使用子代替后代选择器。 E.G：

> li:nth-child(1)>a:hover {
    color: $red;
}

请参阅：http://codepen.io/anon/pen/rrpVaV

Answer 2

首先，您已在#container ul下使用#container ul {position:relative;}的全局css，此css将适用于ul中的每个#container及其覆盖的.list-inline ul{position:absolute} #container > ul {position:relative;} 1}}，您需要设置直接子选择器css immediate child selector css。

第二个问题。你需要做同样的事情，使用class UnderlinedLabel: UILabel { override var text: String! { didSet { let textRange = NSMakeRange(0, count(text)) let textRange = NSMakeRange(0, text.characters.count) let attributedText = NSMutableAttributedString(string: text) attributedText.addAttribute(NSUnderlineStyleAttributeName , value:NSUnderlineStyle.StyleSingle.rawValue, range: textRange) // Add other attributes if needed self.attributedText = attributedText } } }

http://codepen.io/anon/pen/LRZVRO

Answer 3

效果很好。你必须添加li的宽度

.list-inline li {
   min-width: 110px;
}

和

.list-inline li:hover ul {
   display: table;
}

DEMO

 https://codepen.io/Dhaarani/pen/vXpONj

当将鼠标悬停在一个li元素上时，为什么嵌套的ul元素会使整个li元素失效

3 个答案: