Question

我有一个css菜单，如图所示：

当我把鼠标放在＆＃34; Haschildren＆＃34;我获得：

我的问题是：我应该修改什么才能避免溢出（子声音全是灰色的）？我试图修改css中的ul e li属性，但是没有结果......我只想改变必要的严格，剩下的就不变了。

HTML代码段为：

＆＃13;

$(document).ready(function() {
  $('.has-children').hover(
    function() {
      $(".sub-menu li").slideDown("slow");

    });

  $(".sub-menu").mouseleave(function() {
    $('.sub-menu li').hide();
  });
});

＆＃13;

.header {
  background-color: #333;
  position: absolute;
  width: 100%;
  z-index: 3;
}
.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #333;
}
.header li a {
  display: block;
  padding: 20px 20px;
  color: #f2f2f2;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}
.header li {
  float: left;
}
.submenu ul {
  background-color: #fff;
}
.sub-menu li {
  clear: both;
  display: none;
}
.sub-menu li a {
  clear: both;
  border-right: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link type="text/css" rel="stylesheet" href="mystyle.css">
  
</head>

<body>
  <header class="header">
    <ul class="menu">
      <li><a href="#work">Work</a>
      </li>
      <li><a class="has-children" href="#about">Haschildren</a>
        <ul class="sub-menu">
          <li><a href="#link1">Child 1</a>
          </li>
          <li><a href="#link2">Child 2</a>
          </li>
          <li><a href="#link3">Child 3</a>
          </li>
        </ul>
      </li>
      <li><a href="#careers">Careers</a>
      </li>
    </ul>
  </header>


</body>

</html>

＆＃13;

Answer 1

您可以将.has-children li父亲设为亲属，并使.submenu绝对。然后，您可以使用top, left等属性定位子菜单以适合您的设计

Answer 2

    <ul class="top-level-menu">
            <li><a href="index.html">Home</a></li>
<li><a href="#">About Us</a>
     <ul class="second-level-menu">
        <li><a href="#">History of the organisation</a></li>
        <li><a href="#">Objective of the company</a></li>
        <li><a href="#">Our Mission</a></li>
         <li><a href="#">Our Vision</a></li>
     </ul>
</li>
    </ul>

＆＃13;

.third-level-menu
{
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li {
    background: #3a3836;
    border-bottom: 1px solid #fff;width: 135%;
}
.third-level-menu > li:hover { background: #CCCCCC; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.second-level-menu > li a{
    font-family: 'FuturaBT-Medium', sans-serif;
    font-size: 14px;
    font-weight: normal;    text-transform: none;}
.second-level-menu > li {
    position: relative;
    background: #231f1c;
    z-index: 9999999;
    text-align: left;width: 140%;
    border-bottom: 1px solid #fff;
}
.second-level-menu > li:hover { background: #CCCCCC; }

.top-level-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.top-level-menu > li {
    position: relative;
    float: left;
    width: 154px;
    margin: 0 0 0 10px;
    display: inline;
    border-right: 1px solid;
    border-left: 1px solid;background-color: #231f1c;
}
.top-level-menu > li:hover {    background: #f4821e;
}

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;
    
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;    text-transform: uppercase;
}
.top-level-menu a:hover {
    color: #000;
}

＆＃13;

       <body>
          
                <ul class="top-level-menu">
                <li><a href="index.html">Home</a></li>
    <li><a href="#">About Us</a>
   		 <ul class="second-level-menu">
            <li><a href="#">History of the organisation</a></li>
            <li><a href="#">Objective of the company</a></li>
            <li><a href="#">Our Mission</a></li>
             <li><a href="#">Our Vision</a></li>
         </ul>
    </li>
        </ul>

           
</body>

＆＃13;

Answer 3

这是你的答案我设置菜单位置绝对和子菜单位置相对。并且还使用左右0和顶部：40来等于链接的行高。另外liveFiddle

$(document).ready(function() {
  $('.has-children').hover(
    function() {
      $(".sub-menu li").slideDown("slow");

    });

  $(".sub-menu").mouseleave(function() {
    $('.sub-menu li').hide();
  });
});

 

   header {
  background-color: #000;
  padding: 10px 0;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

header ul li {
  display: inline-block;
  position: relative;
}


/* sub navigation */

.menu li ul {
  background-color: #000;
  position: absolute;
  left: 0;
  top: 40px;
  /* make this equal to the line-height of the links (specified below) */
  right: 0;
}

.menu a {
  line-height: 40px;
  padding: 0 12px;
  margin: 0 12px;
}

.menu a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.menu a:hover,
.menu a:focus,
.menu a:active {
  color: #bbb;
}


/* style sub level links */

.sub-menu li a {
  margin: 0 10px;
  padding: 0;
}

.sub-menu li {
  position: relative;
  margin: 0;
  text-align: center;
   display: none; /* hide sub with css */
}

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<header class="header">
  <ul class="menu">
    <li><a href="#work">Work</a></li>
    <li><a class="has-children" href="#about">Haschildren</a>
      <ul class="sub-menu">
        <li><a href="#link1">Child 1</a></li>
        <li><a href="#link2">Child 2</a></li>
        <li><a href="#link3">Child 3</a></li>
      </ul>
    </li>
    <li><a href="#careers">Careers</a></li>
  </ul>
</header>

Answer 4

我注释掉了两行，并为.header li a添加了背景色：

.header {
   background-color: #333;
   /*position: absolute;*/
   width: 100%;
   z-index: 3;
}
.header ul {
   margin: 0;
   padding: 0;
   list-style: none;
   /*overflow: hidden;*/
   background-color: #333;
}
.header li a {
   display: block;
   padding: 20px 20px;
   color: #f2f2f2;
   border-right: 1px solid #f4f4f4;
   text-decoration: none;
   background-color: #333;
}
.header li {
   float: left;
}
.submenu ul {
   background-color: #fff;
}
.sub-menu li {
   clear: both;
   display: none;
}
.sub-menu li a {
   clear: both;
   border-right: 0px;
}

Css + jQuery下拉子菜单溢出

4 个答案: