# [SOLVED] CSS Menu Push Content Down



## TeenScripts (Oct 27, 2012)

Okay Here's a code I found (tweaked it up a bit)
You can paste the code Here to preview it:

```
<style>
    /* Get ride of default margin's and padding */
    ul, li {
        margin: 0;
        padding: 0;
    }

    /* Display parent unordered list items horizontally */
    ul li {
        float: left;
        list-style: none;       /* Get rid of default Browser styling */
        margin-right: 10px;     /* Add some space between items */
    }

        /* Hide inset unordered Lists */
        ul li ul {
            display: none;
        }
         /* Add Color to Links in Lists */
		ul a {
		color:#384EA3
		}
        /* Un-Hide inset unordered Lists when parent <li> is hovered over */
        ul li:hover ul {
            display: block;
            position: absolute;
			background: #E7EFF4;
			border: 1px solid #858585;
			text-indent: 48px; 
        }

            /* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
            ul li:hover ul li {
                clear: left;            
            }
</style>
<div>
<ul>
    <li>
<h2>Link 1</h2>
    <ul>
        <li><a href="#" title="">Link 1.1</a></li>
        <li><a href="#" title="">Link 1.2</a></li>
        <li><a href="#" title="">Link 1.3</a></li>
        <li><a href="#" title="">Link 1.4</a></li>
        <li><a href="#" title="">Link 1.5</a></li>
        <li><a href="#" title="">Link 1.6</a></li>
    </ul>
    </li>
</div>
<div>
<ul>
<li>
<h2>Link 2</h2>
            <ul>
                <li><a href="#" title="">Link 2.1</a></li>
                <li><a href="#" title="">Link 2.2</a></li>
                <li><a href="#" title="">Link 2.3</a></li>
                <li><a href="#" title="">Link 2.4</a></li>
                <li><a href="#" title="">Link 2.5</a></li>
                <li><a href="#" title="">Link 2.6</a></li>
            </ul>
        </li>
</div>
```
I want "Link 2" to go under "Link 1". (I am hoping the menu will push "Link 2" down in order to display it's contents...If not, could anyone please suggest how to do that too?)


----------



## brent.charlebois (May 8, 2007)

*Re: CSS Menu Push Content Down*

Hey, now fair! You guys know what you're doing!
:flowers:


----------



## TeenScripts (Oct 27, 2012)

*Re: CSS Menu Push Content Down*

XD I just needed some help with the code, and I have tried everything possible in HTML including <div> and <br /> tags. So I am pretty sure I have to add something in CSS, I tried adding padding to the ul li:hover ul but that just made the Hover panel extend to the bottom. Should I try adding the padding to the ul li?


----------



## wmorri (May 29, 2008)

*Re: CSS Menu Push Content Down*

Start by removing:


```
float: left;
```
That will remove the horizontal menu. Then we can work on getting your drop down menus lined up.


----------



## TeenScripts (Oct 27, 2012)

*Re: CSS Menu Push Content Down*

Everything's good so far, so what would you propose? 
(Btw I added the menu's to a default site and Link 1 and Link 2 are in the center of my page -I wanted them to show up that way-. Link 2 is now under Link 1, so that fixed my main problem but now when I hover over one of the two links, the menu shows up on the far left side of the screen, so as you said, what would I need to line it up, so that it shows up under) Ill try adding a padding-left tag in CSS though Im not sure about it.


----------



## wmorri (May 29, 2008)

*Re: CSS Menu Push Content Down*

Can you post a link to your site or a screenshot for me to look at?


----------



## TeenScripts (Oct 27, 2012)

*Re: CSS Menu Push Content Down*

Here's a quick link to it: (I made this site, hoping to present it too my school once it's done , sorry if everything is in French=French School, this is just one of the pages btw) Hover over "La Fondation (The Foundation)" and Link 2
School Site by TeenScripts


----------



## TeenScripts (Oct 27, 2012)

*Re: CSS Menu Push Content Down*

Okay, I added a few "margin" tags in the css to slide it under the text:

```
<style>
    /*CSS by TeenScripts 2012 */
   /* Get ride of default margin's and padding */
    ul, li {
        margin: 0;
        padding: 0;
    }

    /* Display parent unordered list items horizontally */
    ul li {
        list-style: none;       /* Get rid of default Browser styling */
        margin-left: 210px;     /* Add some space between items */
		margin-right: 10px;
    }

        /* Hide inset unordered Lists */
        ul li ul {
            display: none;
        }
         /* Add Color to Links in Lists */
		ul a {
		color:#384EA3
		}
        /* Un-Hide inset unordered Lists when parent <li> is hovered over */
        ul li:hover ul {
            display: block;
            position: absolute;
			background: #E7EFF4;
			border: 1px solid #858585;
        }

            /* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
            ul li:hover ul li {
                clear: left;            
            }
</style>
```
But
1. The Links inside the hover panel are stuck to the right side of the panel 
2. The "Link 2" is not pushing down when I hover onto "La Fondation (Link 1)" 
I tried changing the current position tag: 

```
ul li:hover ul { position: absolute;}
```
To:

```
ul li:hover ul { position: center;}
```
And that did infact Center the text and push Link 2 down when hovered on. 
But
Now the text is pushed down :facepalm:
I will try to inspect my entire CSS code, maybe there has been an interference with another code of my webpage? Here's My Entire Webpage's CSS Code:

```
<style>
/* CSS by TeenScripts 2012 */
header, section, footer, aside, nav, article, figure, figcaption {
     display: block;}
	 
body {
     color: #666666;
     background-color: #f9f8f6;
     background-image: url("http://creattica.com/uploaded-images/0007/9446/1.jpg");
     background-size: 1000px 1200px;
     background-position: center;
     font-family: Georgia, Times, serif;
     line-height: 1.4em;
     margin: 0px;}
	 
.wrapper {
     width: 1000px;
     margin: 50px auto 20px auto;
 
     background-color: #ffffff;}
	 
header {
     height: 160px;
	 border: 4px solid #ffffff;
     background-image: url("http://www.weebly.com/uploads/3/3/6/4/3364437/header_images/1353254988.jpg");
     background-size: 1000px 160px;
     background-repeat: no-repeat;}

h1 {
     text-indent: -9999px;
     width: 992px;
     height: 158px;
     margin: 0px;}
	 
nav, footer {
     clear: both;
     color: #ffffff;
     background-image: url("http://forrst.com/assets/images/layout/nav_wood.png?1344446290");
     height: 30px;}
	 
section.courses {
     float: left;
     width: 679px;
     border-right: 1px solid #CCCCCC;}
	 
article {
     clear: both;
     overflow: auto;
     width: 100%;}

hgroup {
     margin-top: 40px;}

figure {
     float: left;
     width: 290px;
     height: 220px;
     padding: 5px;
     margin: 20px;
     border: 1px solid #CCCCCC;}
	 
figcaption {
     font-size: 90%;
     text-align: left;}
	 
aside {
     width: 300px;
     float: left;
     padding: 0px 0px 0px 20px;}
	 
aside section a:hover {
     display: block;
     padding: 10px;
     border-bottom: 1px solid #eeeeee;}
	 
aside section a:hover {
     color: #985d6a;
     background-color: #efefef;}
a {
     color: #09c;
     text-decoration: none;}
	 
h1, h2, h3 {
     font-weight: normal;}
	 
h2 {
     margin: 10px 0px 5px 0px;
     padding-left: 20px;}
	 
h3 {
     margin: 0px 0px 10px 0px;
     color: #99CC00;}
	 
aside h2 {
     padding: 30px 0px 10px 0px;
     color: #99CC00;}
	 
footer {
     font-size: 80%;
     padding: 7px 0px 0px 20px;
}
    /* Get ride of default margin's and padding */
    ul, li {
        margin: 0;
        padding: 0;
    }

    /* Display parent unordered list items horizontally */
    ul li {
        list-style: none;       /* Get rid of default Browser styling */
        margin-left: 210px;     /* Add some space between items */
		margin-right: 10px;
    }

        /* Hide inset unordered Lists */
        ul li ul {
            display: none;
        }
         /* Add Color to Links in Lists */
		ul a {
		color:#384EA3
		}
        /* Un-Hide inset unordered Lists when parent <li> is hovered over */
        ul li:hover ul {
            display: block;
            position: center;
			background: #E7EFF4;
			border: 1px solid #858585;
        }

            /* Clear the any element that may be "float: left;" (Essentially moves the item to the next line */
            ul li:hover ul li {
                clear: left;            
            }

/* Google Imported Font for CSS Menu */

@import url(http://fonts.googleapis.com/css?family=Capriola);

/* CSS Menu */ 

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
	 padding: 0;
	 margin: 0;
	 line-height: 1;
	 font-family: 'Capriola', sans-serif;}

#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
     content: '';
	 display: table;}


#cssmenu:after, #cssmenu > ul:after {
     clear: both;}

#cssmenu {
     zoom:1;
	 height: 20px;
	 background: url(http://cssmenumaker.com/sites/default/files/menu/146/bottom-bg.png) repeat-x center bottom;
	 border-radius: 2px;}

#cssmenu ul{
     background: url(http://forrst.com/assets/images/layout/nav_wood.png?1344446290) repeat-x 0px 4px;
	 background-size: 50px 70px;}

#cssmenu ul li{
     float: left;
	 list-style: none;}

#cssmenu ul li a{
     display: block;
	 height: 37px;
	 padding: 22px 30px 0;
	 margin: 4px 2px 0;
	 border-radius: 2px 2px 0 0;
	 text-decoration: none;
	 font-size: 15px;
	 color: white;
	 text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
	 font-weight: 400;
	 opacity: .9;}

#cssmenu ul li:first-child a{
	 margin: 4px 2px 0 0;}

#cssmenu ul li a:hover, #cssmenu ul li.active a{
     background: url(http://cssmenumaker.com/sites/default/files/menu/146/color.png) center bottom;
	 display: block;
	 height: 37px;
	 margin-top: 0px;
	 padding-top: 26px;
	 color: #ffffff;
	 text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
	 opacity: 1;}
</style>
```
Check it out and tell me if anything is interfering or if I need to add an extra code for the menu. 
Thank's! (Oh how CSS3 can drive us mad :hide: )


----------

