Search code examples
htmljquerycssmenu

html5 css3 get stuck with expands collapse menu

i have a stack right now when i explore HTML5 and CSS3 , i try to create a expand and collapse menu but i have problem when menu pull down a border bottom from css3 not pull down too, how can i solve it? i post my code for you can easy to see and correct for me, 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%;
}

Pic 1

Pic 2

Solution

  • The problem is that you're specifying the height of each item at 40px. They must stay at 40px. They won't move. You are currently making the <a> tags move dynamically, and that will work, but just for the stuff inside the <a> tags; the parent object won't be affected.

    A simple way to solve this is to simply set the height attribute of the <article class="asideBoxTitle"> elements to be a min-height instead and remove the float properties from the child <a> tags so that they affect the position of their parent's next sibling. Like so:

    .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's a JSFiddle. Regards.