3 Replies - 1315 Views - Last Post: 29 September 2014 - 12:15 PM

#1 miro1603   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 23-August 14

Html and css: drop down menu wont work...

Posted 23 August 2014 - 03:16 AM

I have a drop down menu on the top of my page and I am drying to get that to top of the center on my page. It wont go center and now that drop down effect wont work if you can solve this problem I realy to appreciate that or you can show me an other cool drop down menu which will work.

    <!DOCTYPE html>

    <HEAD>
    <TITLE>    </TITLE>

    <LINK href="to.css" rel="stylesheet" type="text/css">


    </HEAD>

    <BODY>
    <DIV ID="header">
    <div id="nav">
    <div id="nav_wrapper">
    <ul>
    <li><a href="#">HOME</a>
    </li>
    </li>
    <li> <a href="#">dropdown #1</a>

    <ul>
    <li><a href="#">dropdown #1 item #1</a>
    </li>
    <li><a href="#">dropdown #1 item #2</a>
    </li>
    <li><a href="#">dropdown #1 item #3</a>
    </li>
    </ul>
    </li>
    <li> <a href="#">dropdown #2</a>

    <ul>
    <li><a href="#">dropdown #2 item #1</a>
    </li>
    <li><a href="#">dropdown #2 item #2</a>
    </li>
    <li><a href="#">dropdown #2 item #3</a>
    </li>
    </ul>
    </li>
    </li>
    </ul>
    </div>
    <!-- Nav wrapper end -->
    </div>


    </DIV>

    </DIV>

    <DIV ID="wrapper">
	<DIV ID="content_area">
    <p> </p>
    <center>
    <video width="900" height="550" controls autoplay>
    <source src="fifa.mp4" type="video/mp4">
    <source src="fifa.ogg" type="video/ogg">
    <source src="fifa.webm" type="video/webm">
    <object data="fifa.mp4" width="320" height="240">
    <embed src="fifa.swf" width="320" height="240">
    </object> 
    </video>
    </center>
 
	</DIV>
    </DIV>

    <DIV ID="footer">
    Hello and Welcome --------------
    </DIV>

 
    </BODY>

    </HTML>


CSS:

    body {
    margin:0;
    padding:0;
    min-width:525px;
    font-family: Arial;
    font-size: 17px;
    background-image:url('fifa2.jpg');
    }

    #header {
    float: left;
    width: 100%;
    height: 100px;
    position: absolute;
    backgroundcolor: 

    }


    #footer {
    float: left;
    width: 100%;
    background-color: #000000;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    position: absolute;
    height: 40px;
    left: 0px;
    bottom: 0px;
    }

    #wrapper {
    padding-left: 200px;
    padding-right: 125px;
    overflow: hidden;
    }

    #left_side {
    position: relative;
    float: left;
    width: 200px;
    right: 200px;
    margin-left: -100%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    }

    #right_side {
    position: relative;
    float: left;
    width: 125px;
    background-color: #66CCCC;
    margin-right: -125px;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    }

    #content_area {
    position: relative;
    float: left;
    width: 100%;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    }


    #nav {
    background-color: #222;
    }
    #nav_wrapper {
    width: 350px;
    margin: 0 auto;
    text-align: left;
    }
    #nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
    }
    #nav ul li {
    display: inline-block;
    }
    #nav ul li:hover {
    background-color: #333;
    }
    #nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 15px;
    text-decoration: none;
    }
    #nav ul li:hover ul {
    display: block;
    }
    #nav ul ul {
    display: none;
    position: absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
    }
    #nav ul ul li {
    display: block;
    }
    #nav ul ul li a:hover {
    color: #699;
    }


    video {
    margin-top: 250px;
    }

Attached image(s)

  • Attached Image

This post has been edited by andrewsw: 23 August 2014 - 05:30 AM
Reason for edit:: Use CODE tags


Is This A Good Question/Topic? 0
  • +

Replies To: Html and css: drop down menu wont work...

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,342
  • Joined: 12-December 12

Re: Html and css: drop down menu wont work...

Posted 23 August 2014 - 05:41 AM

It is not the menu that isn't centred, it is the rest of the content, because you have give #wrapper different left and right padding.
#wrapper {
    /*padding-left: 200px;
    padding-right: 125px;*/
    overflow: hidden;
}

There are countless tutorials for "css navigation menu" or "css drop down menu", "css navbar", etc..

100 Great CSS Menu Tutorials
Was This Post Helpful? 0
  • +
  • -

#3 yasarquadra   User is offline

  • New D.I.C Head

Reputation: -3
  • View blog
  • Posts: 7
  • Joined: 29-September 14

Re: Html and css: drop down menu wont work...

Posted 29 September 2014 - 11:34 AM

.drop-menu {
display: block;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 10px 10px;
font-size: 22px;
height: 25px;
max-height: 25px;
width: 400px;
background: #fff;
cursor: pointer;
border: 1px solid #f6f0e4;
}
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,342
  • Joined: 12-December 12

Re: Html and css: drop down menu wont work...

Posted 29 September 2014 - 12:15 PM

Just posting code without any comments is not helpful. Also please use code-tags.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1