html - 将 CSS 菜单移到屏幕右侧?

标签 html css menu position

我希望重新定位此下拉菜单,使其位于标题的右侧,而不是其当前位置的正下方。我无法在将它绑定(bind)到屏幕左侧的任何位置的 css 中找到代码?

enter image description here

索引:

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

样式表:

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
}

任何帮助将不胜感激!

最佳答案

试试这个片段:

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>

您已将 float: left 设置为 right 到您的 #primary_nav_wrap ul

关于html - 将 CSS 菜单移到屏幕右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32907896/

相关文章:

css - 在 html 加载之前添加 3d 动画

php - 将事件页面与谷歌日历同步

html - 使用响应性和标题属性改进类别 sprite 菜单

jQuery 在菜单上添加 .active 类

css - 在导航菜单中隐藏文本

javascript - 如何将 img 元素放在透明 img 元素后面?

php - 为什么我的评论将页面向下移动?

html - 形式如表

javascript - 可以将 HTML 内容放在 Canvas (着陆页)之上

css - 负相对定位放置额外的空间