Make submenu in tab menus hover over page content

[berserk]

I have this dilemma where I need to make my sub-menus hover over the other content on my page but I cannot seem to do this, I have searched and searched but to no avail. I am to the point where I just need a little bit of guidance on this. I’m still relatively new to css but have slowly gotten the hang of it over time. I just cannot seem to figure this one out though.

My issue is that when I hover over the tabs in my tab menu the drop come is triggered BUT it pushes everything else down, what I need is for it to simply hover over everything else.

This is the HTML code that I use.

<div id='cssmenu'>
        <ul class="clearfix">
            <li><a href="/xampp/customertable/">Home</a></li>
            <li>
                <li class='active'><a href="/xampp/profile/">Profile<span class="arrow">▼</span></a>

                <ul class="sub-menu">
                    <li><a href="#">In Cinemas Now</a></li>
                    <li><a href="#">Coming Soon</a></li>
                    <li><a href="#">On DVD/Blu-ray</a></li>
                    <li><a href="#">Showtimes & Tickets</a></li>
                </ul>
            </li>
            <li><a href="#">T.V. Shows</a></li>
            <li class="current-item"><a href="#">Photos</a></li>
            <li><a href="#">Site Help</a></li>
        </ul>
</div>

While this is my css code, its ugly i know but its all i got lol.

/*----- Menu Outline -----*/

#cssmenu ul ul {
  display: none;
}

#cssmenu ul li:hover > ul {
  display:block;
}

/*Formatting for the text inside the submenu*/
#cssmenu li:hover > a, .current-item > a {
    text-decoration:none;
    color:#ffffff;
}

/*----- Bottom Level (sub Menu) -----*/
#cssmenu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.clearfix:after {
    display:inline-block;
    clear:both;
}

.sub-menu {
    width:103%;
    padding:0px 0px;
    position:absolute;
    top:80%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#ffffff;
}

.sub-menu li {
    display: inline-block;
    font-size:16px;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:#1577a6;
}

Thank you for your assistence and your time!!!!!

[gentlemedia]

In the CSS snippet here on line 19 there's a z-index set to '1'.
Change this to a higher value... for example 1000 to see if will stay on top of your other content.

[JorgeM]

It would be helpful for me to see the additional code that you are saying is being pushed down. I would think its a z-index issue if you said the content was hidden behind other elements. If you are indicating that content is being pushed down, that seems to be related to the fact that the elements are in their normal position and when they are visible, they move the rest of the adjancent elements.

Your first level should be set to position:relative and your second level items should be set to absolute so that they are taken out of the normal flow.

[berserk]

Here is the whole css code

@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu {
  width: auto;
  border-bottom: 6px solid #1577a6;
  font-family: Calibri, sans-serif;
  line-height: 1;
}

#cssmenu ul {
  background: #ffffff;
}

#cssmenu > ul > li {
  float: left;
}

#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}

#cssmenu.align-right > ul > li {
  float: right;
}

#cssmenu.align-right > ul > li > a {
  margin-right: 0;
  margin-left: 0px;
}

#cssmenu > ul > li > a {
  z-index: 2;
  padding: 18px 25px 5px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #1577a6;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: 0px;
}

#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}

#cssmenu > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}

#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
  background: #1577a6;
}

/*This is the formatting for the menu tab and the drop down elements*/

#cssmenu ul ul {
  display: none;
}

#cssmenu ul li:hover > ul {
  display:block;
}

/*Formatting for the text inside the submenu*/
#cssmenu li:hover > a, .current-item > a {
    text-decoration:none;
    color:#ffffff;
}

/*Bottom Level (sub Menu)*/
#cssmenu li:hover .sub-menu {
    z-index:1000;
    opacity:1;
}

.clearfix:after {
    display:inline-block;
    clear:both;
}

.sub-menu {
    width:103%;
    padding:0px 0px;
    position:absolute;
    top:80%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#ffffff;
}

.sub-menu li {
    display: inline-block;
    font-size:16px;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:#1577a6;
}

Here is the HTML

<body>
<div id='cssmenu'>
        <ul class="clearfix">
            <li><li class='active'><a href="/xampp/customertable/">Home</a></li>
            <li>
                <a href="">Profile<span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="/xampp/profile/">Update or Change</a></li>
                    <li><a href="#">Change Password</a></li>
                </ul>
            </li>
            <li><a href='#'>Send Notice of Sale</a></li>
            <li><a href='#'>Exp of Deficiecy</a></li>
            <li><a href='#'>Accounts</a></li>
            <li><a href='#'>Reports</a></li>
            <li><a href='#'>Ask an Expert</a></li>
            <li><a href='#'>Help</a></li>
        </ul>
</div>
</body>

    <div class="row-fluid">
        <div class="span12">
            <div class="container">
                <form method="post" action="##########.php" >
                    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
                            <br>
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Status</th>
                                    <th>Name</th>
                                    <th>Last 6 VIN#</th>
                                    <th>Account</th>
                                    <th>Repo Sale Date</th>
                                    <th>Docs or Changes</th>
                                </tr>
                            </thead>
                            <tbody>
                            <?php 
                            $query=mysqli_query($con, "SELECT * FROM users")or die(mysqli_error($con));
                            while($row=mysqli_fetch_array($query)){
                            $id=$row['id'];
                            ?>
                                        <tr>
                                          <td> </td>
                                         <td><?php echo @$row['status'] ?></td>
                                         <td><?php echo @$row['username'] ?></td>
                                         <td><?php echo @$row['last_6_vin'] ?></td>
                                         <td><?php echo @$row['account'] ?></td>
                                         <td><?php echo @$row['repo_sale_date'] ?></td>
                                         <td><?php echo @$row['docs'] ?></td>
                                </tr>
                                  <?php } ?>
                        </tbody>
                </table>
                 </div>
        </div>
    </div>

</form>

[berserk]

Also update to your posts, i changed the z index and even tried changing the positions from absolute to relative and vice versa but nothing worked. when i hover over the menu it will puch everything down, but if your not hoevered over then its fine. Am i missing some wrapper div or something?

[JorgeM]

Its definately related to positioning. When i add this style at the end of your sytles, the pushing effet stops..

.sub-menu { position: absolute !important; }

[berserk]

YOU SIR ARE BRILLIANT! i know this was a simple problem but i feel that its the simple things that make a program nice to use. Thank you so much for your assistance. Though i would like to know, why is it that this line is needed? I have used this code before and it has worked in the past, i agree i am usign a custom tab code now i just couldnt figure out why is was pushing everything down.

again thank you for your assistance

[gentlemedia]

I know it's marked as solved, but I think adding !important is a bit too easy to solve this. I mean with easy... adding !important should be your last resort and only if you really have to.

I know now what you were suffering from and that is specificity, because you defined on two spots in your stylesheet, styles to the sub menu. At the top you have a CSS block which includes #cssmenu ul which is also your submenu. To this rule there is a position: relative declared and because #cssmenu ul has a higher specificity then .sub-menu (id + element is stronger then a class) you could not override it with position: absolute unless you throw an !important into the mix :)

So, now you know what the root of the problem was. Or you fix your specificity issue or you leave the important rule :)

[berserk]

AH HA so it did have something to do with me not seperating the sub menu from the menu in the css. Thank you also sir, this has helped me learn a little bit more about this craft. I will work on applying your fix simply for educational purposes and good practices! :D

[JorgeM]

Also, just to clarify, my last post is not the suggested solution. I was just merely pointing to the fact that my original thoughts regarding positioning seemed to be corret, or at least on the correct path.

I added the !important option to just make sure that nothing else was interfering with the absolute positioning. I didnt have time when i wrote that to go out and figure out why or what the best solution was to fix it. I was only trying to point you in the right direction. Its better if you arrive at the solution on your own if you really want to get some learning/experience out of it.

[berserk]

Agreed, regardless i feel both of you heavily guided me to the right solution :D

[gentlemedia]

@JorgeM - Good point about 'arrive at the solution on your own' and I was not sure if you tipped the !important as the solution or just as a quick check, so therefore my post.

@berserk - Just read more about specificity, because that is next to the CSS box-modal a basic, but fundamental part of CSS. In short; don't get too specific with your selectors and try even to avoid using id's as CSS selectors if you can.

[berserk]

gotcha, quick question though, is there a limit to the level of selectors you can have in a css file? I mean do they have to follow a specific formatting like ui, li, ul, and so on and so forth? Hope this isnt a dumb question lol

[JorgeM]

Not a dumb question at all. There is a "best practices" you want to follow. You may want to review it write from a very reputable source...

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS