Is there a way to reposition the dropdown menu so that it appears on the right side of the title instead of below it? I've checked the CSS code but can't seem to find anything that ties it to the left side of the screen.
https://i.sstatic.net/n0Kmv.png
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 suggestions or assistance on this matter would be highly valued.