可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

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!

回答1:

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

回答2:

you can try this one:

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;



    margin-top:-100px;

}

#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:right;

}

#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
}

DEMO PAGE