Question

我正在学习HTML5和CSS。所以我的问题可能非常基本且非常幼稚。我为此道歉。练习我正在开发一个带有下拉子菜单的标题菜单。我主要通过将其display属性设置为none隐藏下拉菜单，将鼠标悬停在父级上后，我将显示设置为阻止。但似乎悬停不能改变显示值。另外值得一提的是我的html页面使用弹性框以便有网格布局。这是html文件：

<div class="menue">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
        <ul>
          <li><a href="#">All</a></li>
          <li><a href="#">New Arrival</a></li>
          <li><a href="#">Casual</a></li>
          <li><a href="#">Gown</a></li>
          <li><a href="#">Bridesmade</a></li>
        </ul>
      <li><a href="#">Woman</a></li>
          <ul>
            <li><a href="#">All</a></li>
            <li><a href="#">New Arrival</a></li>
            <li><a href="#">Casual</a></li>
            <li><a href="#">Gown</a></li>
            <li><a href="#">Bridesmade</a></li>
          </ul>
      <li><a href="#">Men</a></li>
        <ul>
          <li><a href="#">All</a></li>
          <li><a href="#">New Arrival</a></li>
          <li><a href="#">Casual</a></li>
          <li><a href="#">Gown</a></li>
          <li><a href="#">Bridesmade</a></li>
        </ul>
      <li><a href="#">Kids</a></li>
        <ul>
          <li><a href="#">All</a></li>
          <li><a href="#">New Arrival</a></li>
          <li><a href="#">Casual</a></li>
          <li><a href="#">Gown</a></li>
          <li><a href="#">Bridesmade</a></li>
        </ul>
      <li><a href="#">Flyers</a></li>
        <ul>
          <li><a href="#">All</a></li>
          <li><a href="#">New Arrival</a></li>
          <li><a href="#">Casual</a></li>
          <li><a href="#">Gown</a></li>
          <li><a href="#">Bridesmade</a></li>
        </ul>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>

这是css文件：

.menue {
  background: #fc575e;
}

nav{
  height:40px;
  width: 960px;
  display: block;
  margin: 0,auto;
  text-align: center;
  text-transform: uppercase;
}

nav a{
  display: block;
  text-decoration: none;
  font-size: 13px;
  color: #112233;
}

nav ul{
  list-style: none;
}

nav ul li{
  float:left;
  width:140px;
  height:40px;
  line-height: 40px;
  background: #fc575e;
}

nav ul ul li{
  position: relative;
  display: none;
}

nav ul li:hover ul li{
  display: block;
}

nav ul li:hover{
  background-color: #223433;
  color:#f0f1f5;
}

似乎我的悬停操作无法将子菜单的显示值更改为阻止。我想知道是否有人可以给我一个暗示？非常感谢。

Answer 1

你的CSS似乎工作正常。您想要做的是将<a>和<ul>标记包含在<li>

中

<li>
     <a href="#">Home</a>
      <ul>
      <li><a href="#">All</a></li>
      <li><a href="#">New Arrival</a></li>
      <li><a href="#">Casual</a></li>
      <li><a href="#">Gown</a></li>
      <li><a href="#">Bridesmade</a></li>
    </ul>
</li>

Answer 2

@Davi说得对，但你也可以改变

nav ul li:hover ul li{
  display: block;
}

代表

nav ul li:hover + ul li {
  display: block;
}

Heres a jfiddle of it working

顺便说一句，当您将鼠标悬停在菜单按钮上时，只要子菜单想要显示，它就会取代原始菜单中的所有其他元素

另外，这里有一个nice tutorial关于你想要具体做什么

Answer 3

我知道@JSelser已经提供了一个有效的答案。然而，我觉得我可以对另一个人有所帮助。我完成了本教程http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css并进行了调整以满足您的菜单。

module NavigationHelper
  def navigation_add(title, url)
    nav_list = session['navigation'].present? ? session['navigation'] : []
    nav_list << { 'title' => title, 'url' => url }
    # 1. Take last 3 items only (-1 is last, not -0)
    nav_list = nav_list[-3..-1] if nav_list.length > 3
    # 2. Now, if first is pointing root, remove it
    nav_list.shift if nav_list[0]['url'] == '/'
    # 3. If last one is same as its predecessor, remove it
    nav_list.pop if nav_list.length > 1 && (nav_list[-1]['url'] == nav_list[-2]['url'])

    session['navigation'] = nav_list
  end

  def render_navigation
    render partial: 'shared/navigation', locals: { nav_list: session['navigation'] }
  end
end

将鼠标悬停在菜单

3 个答案: