Question

我一直致力于创建HTML / CSS菜单。我有布局，一切看起来都很棒，唯一的一点就是每次离开父母时子菜单都会消失。我已经查看了为什么会发生这种情况的各种原因，最常见的一个似乎是当鼠标移动时某些元素正在获得焦点，但是我从上到下一直在我的代码上，并且找不到这可能是发生。任何提示和/或编码错误，请告诉我。

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="site.css" rel="stylesheet" />
    <title>My Test Site</title>
    <script src="jquery/jquery-1.12.1.min.js"></script>
    <script src="jquery/slider.js"></script>
</head>
<body>


    <div id="container">
        <header>
            <div id="menu_strip">
                <ul id="menu">
                    <li><a href="#">Home</a></li>
                    <li>
                        <a href="#">About </a>
                        <ul class="hidden_menu">
                            <li><a href="#">What We Do</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact</a></li>
                    <li>
                        <a href="#">Resources </a>
                        <ul class="hidden_menu">
                            <li><a href="#">Bit & Pieces</a></li>
                            <li><a href="#">Reference Documents</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
            <div id="header_wrapper">
                <img id="top_logo" src="images/ed_small.png"/>
                <h1>My Test Site</h1>
            </div>
        </header>
        <div id="banner">
            <div class="slider">
              <ul>
                <li>
                  <img src="images/banner1.png" />
                </li>
                <li>
                  <img src="images/banner2.png" />
                </li>
                <li>
                  <img src="images/banner3.png" />
                </li>
              </ul>
                <button class="prev"><</button>
                <button class="next">></button>
            </div>
        </div>
        <div id="content">
            <p>Content goes here</p>

            <div id="footer">
                <h3>This is the footer</h3>
            </div>
        </div>
    </div>    
</body>
</html>

相关CSS

    @font-face {
    font-family: continuum;
    src: url("/fonts/continuum/contm.ttf");
}

body, div, h1, h2, h3, p, header{
    margin: 0; padding: 0; border: 0;
}

body {
        text-align: center;
}

header {
    position: fixed;
    z-index: 500;
    height: 100px;
    background: #FFFFFF;
    #background: #008C9E;
    #background: #44749D;
    width: 100%;
    align-content: center;
}

#menu_strip {
    position: fixed;
    z-index: 58;
    height:30px;
    width: 100%;
    #background: #000000;
    background: #343838;

}

#menu_strip ul {
    position: absolute;
    font-family: continuum;
    color: #ffffff;
    list-style-type:none;
    margin:0;
    padding:0;

}

#menu {
    right:0;
    z-index: 501;
}

#menu_strip li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

#menu_strip li a {
    display:block;
    min-width:100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-family: continuum;
    color: #fff;
    background: #343838;
    text-decoration: none;
}

#menu_strip li:hover a {
    background: #f5f1e9;
    color: #343838;
}

#menu_strip li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 30px;
    line-height: 30px;
}

#menu_strip li:hover ul a:hover {
    background: #19c589;
    color: #fff;
}

#menu_strip li ul {
    display: none;
}

#menu_strip li ul li {
    display:block;
    float: none;
}

#menu_strip li ul li a {
    width:auto;
    min-width: 155px;
    padding: 0 20px;
}

#menu_strip ul li a:hover + .hidden_menu, .hidden_menu:hover {
    z-index: 503;
    display: block;
}

#header_wrapper {
    #position: fixed;
    position: relative;
    margin-top: 31px;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    width: 960px;

}

header h1 {
    position: relative;
    font-family: continuum;
    margin-top: -56px;
    margin-left: -500px;
}

#top_logo {
    position: relative;
    margin-top: 4px;
    height: 60px;
    margin-left: -900px;
}

#banner {
    position: fixed;
    width: 100%;
    height: 300px;
    top: 100px;
    #background: #00B4CC;
    #background: #CCEBF1;
    background: #f5f1e9;
}

谢谢大家的时间。

Answer 1

像这样添加!important，

#menu_strip ul li a:hover + .hidden_menu, .hidden_menu:hover {
             z-index: 503;
             display: block !important;                        
 }

Answer 2

不确定，如果我理解你想要的颜色架构。我敢于改变你的方法

＆＃13;

 @font-face {
    font-family: continuum;
    src: url("/fonts/continuum/contm.ttf");
}

body, div, h1, h2, h3, p, header{
    margin: 0; padding: 0; border: 0;
}

body {
        text-align: center;
}

header {
    position: fixed;
    z-index: 500;
    height: 100px;
    background: #FFFFFF;
    #background: #008C9E;
    #background: #44749D;
    width: 100%;
    align-content: center;
}

#menu_strip {
    position: fixed;
    z-index: 58;
    height:30px;
    width: 100%;
    #background: #000000;
    background: #343838;

}

#menu_strip ul {
    position: absolute;
    font-family: continuum;
    color: #ffffff;
    list-style-type:none;
    margin:0;
    padding:0;

}

#menu {
    right:0;
    z-index: 501;
}

#menu_strip li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

#menu_strip li a {
    display:block;
    min-width:100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-family: continuum;
    color: #fff;
    background: #343838;
    text-decoration: none;
}

#menu_strip li:hover a {
    background: #f5f1e9;
    color: #343838;
}
#menu_strip li ul li:hover a {
    background: #343838;
    color: #f5f1e9;
}
#menu_strip li ul {
    display: none;
}
#menu_strip li:hover ul {
    display: block;
}
#menu_strip li ul li {
    display:block;
    float: none;
}

#menu_strip li ul li a {
    width:auto;
    min-width: 155px;
    padding: 0 20px;
}

#header_wrapper {
    #position: fixed;
    position: relative;
    margin-top: 31px;
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    width: 960px;

}

header h1 {
    position: relative;
    font-family: continuum;
    margin-top: -56px;
    margin-left: -500px;
}

#top_logo {
    position: relative;
    margin-top: 4px;
    height: 60px;
    margin-left: -900px;
}

#banner {
    position: fixed;
    width: 100%;
    height: 300px;
    top: 100px;
    #background: #00B4CC;
    #background: #CCEBF1;
    background: #f5f1e9;
}

＆＃13;

<div id="container">
        <header>
            <div id="menu_strip">
                <ul id="menu">
                    <li><a href="#">Home</a></li>
                    <li>
                        <a href="#">About </a>
                        <ul class="hidden_menu">
                            <li><a href="#">What We Do</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact</a></li>
                    <li>
                        <a href="#">Resources </a>
                        <ul class="hidden_menu">
                            <li><a href="#">Bit & Pieces</a></li>
                            <li><a href="#">Reference Documents</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
            <div id="header_wrapper">
                <img id="top_logo" src="images/ed_small.png"/>
                <h1>My Test Site</h1>
            </div>
        </header>
        <div id="banner">
            <div class="slider">
              <ul>
                <li>
                  <img src="images/banner1.png" />
                </li>
                <li>
                  <img src="images/banner2.png" />
                </li>
                <li>
                  <img src="images/banner3.png" />
                </li>
              </ul>
                <button class="prev"><</button>
                <button class="next">></button>
            </div>
        </div>
        <div id="content">
            <p>Content goes here</p>

            <div id="footer">
                <h3>This is the footer</h3>
            </div>
        </div>
    </div>

＆＃13;

Answer 3

更改此行

#menu_strip ul li a:hover + .hidden_menu

到

#menu_strip ul li:hover .hidden_menu

＆＃13;

 @font-face {
   font-family: continuum;
   src: url("/fonts/continuum/contm.ttf");
 }
 body,
 div,
 h1,
 h2,
 h3,
 p,
 header {
   margin: 0;
   padding: 0;
   border: 0;
 }
 body {
   text-align: center;
 }
 header {
   position: fixed;
   z-index: 500;
   height: 100px;
   background: #FFFFFF;
   #background: #008C9E;
   #background: #44749D;
   width: 100%;
   align-content: center;
 }
 #menu_strip {
   position: fixed;
   z-index: 58;
   height: 30px;
   width: 100%;
   #background: #000000;
   background: #343838;
 }
 #menu_strip ul {
   position: absolute;
   font-family: continuum;
   color: #ffffff;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 #menu {
   right: 0;
   z-index: 501;
 }
 #menu_strip li {
   display: inline-block;
   float: left;
   margin-right: 1px;
 }
 #menu_strip li a {
   display: block;
   min-width: 100px;
   height: 30px;
   text-align: center;
   line-height: 30px;
   font-family: continuum;
   color: #fff;
   background: #343838;
   text-decoration: none;
 }
 #menu_strip li:hover a {
   background: #f5f1e9;
   color: #343838;
 }
 #menu_strip li:hover ul a {
   background: #f3f3f3;
   color: #2f3036;
   height: 30px;
   line-height: 30px;
 }
 #menu_strip li:hover ul a:hover {
   background: #19c589;
   color: #fff;
 }
 #menu_strip li ul {
   display: none;
 }
 #menu_strip li ul li {
   display: block;
   float: none;
 }
 #menu_strip li ul li a {
   width: auto;
   min-width: 155px;
   padding: 0 20px;
 }
 #menu_strip ul li:hover .hidden_menu,
 .hidden_menu:hover {
   z-index: 503;
   display: block;
 }
 #header_wrapper {
   #position: fixed;
   position: relative;
   margin-top: 31px;
   height: 70px;
   margin-left: auto;
   margin-right: auto;
   width: 960px;
 }
 header h1 {
   position: relative;
   font-family: continuum;
   margin-top: -56px;
   margin-left: -500px;
 }
 #top_logo {
   position: relative;
   margin-top: 4px;
   height: 60px;
   margin-left: -900px;
 }
 #banner {
   position: fixed;
   width: 100%;
   height: 300px;
   top: 100px;
   #background: #00B4CC;
   #background: #CCEBF1;
   background: #f5f1e9;
 }

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="site.css" rel="stylesheet" />
  <title>My Test Site</title>
  <script src="jquery/jquery-1.12.1.min.js"></script>
  <script src="jquery/slider.js"></script>
</head>

<body>


  <div id="container">
    <header>
      <div id="menu_strip">
        <ul id="menu">
          <li><a href="#">Home</a>
          </li>
          <li>
            <a href="#">About </a>
            <ul class="hidden_menu">
              <li><a href="#">What We Do</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Contact</a>
          </li>
          <li>
            <a href="#">Resources </a>
            <ul class="hidden_menu">
              <li><a href="#">Bit & Pieces</a>
              </li>
              <li><a href="#">Reference Documents</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Login</a>
          </li>
        </ul>
      </div>
      <div id="header_wrapper">
        <img id="top_logo" src="images/ed_small.png" />
        <h1>My Test Site</h1>
      </div>
    </header>
    <div id="banner">
      <div class="slider">
        <ul>
          <li>
            <img src="images/banner1.png" />
          </li>
          <li>
            <img src="images/banner2.png" />
          </li>
          <li>
            <img src="images/banner3.png" />
          </li>
        </ul>
        <button class="prev">
          <</button>
            <button class="next">></button>
      </div>
    </div>
    <div id="content">
      <p>Content goes here</p>

      <div id="footer">
        <h3>This is the footer</h3>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

CSS 3子菜单在悬停时不会保持可见状态

3 个答案: