Search code examples
htmlcssmenuposition

Move CSS menu to right of screen?

Im looking to reposition this drop down menu so that it is at the right side of the title, instead of its current location directly below it. I can't find the code in the css anywhere that is tying it to the left side of the screen?

enter image description here

index: 

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

<title>Baking</title>
</head>
<body>

<h1>I want to bake </h1>

<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">...</a>
    <ul>
     <li><a href="#">Bread</a></li>
     <li><a href='#'>Brownies</a></li>
     <li><a href='#'>Cake</a></li>
     <li><a href='#'>ETC</a></li>
  </li>
</ul>
</nav>
</body>
</html>

stylesheet:

body 
{
    background-color: #1F2E2E;
}
h1
{
    color: #EEEEEE;
    font-family: "ADAM.CG PRO";
    font-size: 60px;
    margin-left: 40px;
}

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:right;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#EEEEEE;
    text-decoration:none;
    font-weight:700;
    font-size:55px;
    line-height:32px;
    padding:0 15px;
    font-family:"ADAM.CG PRO";
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#354343
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:0%;
    left:0;
    background:#1F2E2E;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:450px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

Any help would be greatly appreciated!

Solution

  • Try this snippet:

    body 
{
    background-color: #1F2E2E;
}
h1
{
    color: #EEEEEE;
    font-family: "ADAM.CG PRO";
    font-size: 50px;
    margin-left: 40px;
}

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    float:right; /* changed to right */
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#EEEEEE;
    text-decoration:none;
    font-weight:700;
    font-size:55px;
    line-height:32px;
    padding:0 15px;
    font-family:"ADAM.CG PRO";
}
    <nav id="primary_nav_wrap">
<ul>
  <li><a href="#">...</a>
    <ul>
     <li><a href="#">Bread</a></li>
     <li><a href='#'>Brownies</a></li>
     <li><a href='#'>Cake</a></li>
     <li><a href='#'>ETC</a></li>
  </li>
</ul>
</nav>

    You have set float: left instead right to your #primary_nav_wrap ul