Question

我现在有一个堆栈，当我探索HTML5和CSS3，我尝试创建一个展开和折叠菜单，但我有问题当菜单拉下css3的边框底部也不拉下来，我怎么能解决它？我发布我的代码，你可以很容易地看到和纠正，tks！

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen" />
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script>
    $(function() {
    $('#MainMenu').click(function(){
      $('.sub').slideToggle();
    });
});
</script>
<title>Admin Control Panel - TBB Rocking Crew</title>
</head>

<body>
<div id="dHeader">
  <header> </header>
</div>
<div id="dBody">
  <aside>
    <article class="asideBoxTitle"> <a href="#"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </a> </article>
    <article class="asideBoxTitle"> <a href="#"> <img src="img/world.png" class="ico"/>
      <ul id="menu">
        <li id="MainMenu" class="asideTitle">WorldWide</li>
        <li class="sub">Chapterz</li>

        <li class="sub">Memberz</li>
      </ul>
      </a> </article> 
      <article class="asideBoxTitle"> <a href="#"> <img src="img/home.jpg" class="ico"/> <span class="asideTitle">Dashboard</span> </a> </article>
  </aside>
  <!-- end aside-->
  <section> </section>
</div>
</body>
</html>

==============================

@charset "utf-8";
/* CSS Document */
body{
    margin:0px;
}
aside{
    width:240px;
    background:#f5f5f5;
    position:absolute;
    top: 58px;
    bottom:0;
    border-right-width:1px;
    border-right-style:solid;
    border-right-color:#e2e2e2;

}
.asideBoxTitle{
    height:40px;
    line-height:40px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#e2e2e2;
    width:100%;
}
.asideBoxTitle a{
    text-decoration:none;
    float:left;

}
.asideTitle{
    color:#000;
    text-decoration:none;
    margin-left:20px;   
    margin-top:-10px;
    vertical-align:middle;

}
.asideBoxTitle ul{
    display:inline-table;
    list-style-type: none;
    margin: 0;
    padding: 0;
    cursor:pointer;
}

.sub{
    display:none;
    color:#000;
    text-decoration:none;
    margin-left:20px;   
    vertical-align:middle;
}
.sub:after{
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#e2e2e2;
    width:100%;
}
.ico{
    vertical-align:text-top;
    margin-left:10px;   
}
#dHeader{
    background:#20638f;
    height:58px;
    width:100%;
}

Answer 1

问题在于您指定每个项目的高度为40px。他们必须保持40px。他们不会动。您目前正在动态移动<a>代码，这样可行，但仅适用于<a>代码中的内容;父对象不会受到影响。

解决此问题的一种简单方法是简单地将height元素的<article class="asideBoxTitle">属性设置为min-height，并从子{float中移除<a>属性{ {1}}标记，以便它们影响其父级的下一个兄弟的位置。像这样：

.asideBoxTitle{
    min-height:40px;
    line-height:40px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    border-bottom-color:#e2e2e2;
    width:100%;
}
.asideBoxTitle a{
    text-decoration:none;
}

Here是一个JSFiddle。问候。

html5 css3陷入了扩展崩溃菜单

1 个答案: