2017-09-01 159 views
0

我正在做一个简单的网站,我正在努力一件事...CSS响应菜单宽度

是的,这是一个菜单导航栏。 我已经完成了它,但它只是放置在左上角。我想要做的是继续色带(#333)到屏幕的最后。 下面是代码:

#primary_nav_wrap { 
 
    margin: 0; 
 
    float: left; 
 
} 
 

 
#primary_nav_wrap ul { 
 
    background-color: #333; 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#rectangle { 
 
    float: right; 
 
    position: relative; 
 
    width: 1200px; 
 
    overflow: hidden; 
 
    background: #333; 
 
} 
 

 
#primary_nav_wrap ul a { 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-weight: 500; 
 
    line-height: 50px; 
 
    padding: 0 20px; 
 
    font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif 
 
} 
 

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

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

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

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

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

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

 
#primary_nav_wrap ul ul ul { 
 
    top: 0; 
 
    left: 100% 
 
} 
 

 
#primary_nav_wrap ul li:hover>ul { 
 
    display: block 
 
}
<nav id="primary_nav_wrap"> 
 
    <ul> 
 

 
    <li class="current-menu-item"><a href="#">Home</a></li> 
 
    <li><a href="#">Portfolio</a> 
 
     <ul> 
 
     <li><a href="#">About me</a></li> 
 
     <li><a href="#">Menu1</a></li> 
 
     <li><a href="#">MenuMenu</a></li> 
 
     <li><a href="#">MenuMenuMenu</a></li> 
 
     </ul> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a> 
 
     <ul> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenu</a></li> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenu</a></li> 
 
      <li><a href="#">Menu</a></li> 
 
      <li><a href="#">WutWut</a></li> 
 

 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a></li> 
 

 
    </ul> 
 
    <!-- 
 
    <div id="rectangle"></div> 
 
    --> 
 
</nav>

我仍然在学习CSS,HTML和JS,这是我第一次尝试......有些代码是我的,有些不是,但嘿..我'正在努力学习:) 奋斗是继续菜单背景色(#333)到右侧的末尾。正如你看到的我是想这样做,使用矩形(不要杀我对于这一点,请),并没有正确地制定出来,OFC ... 帮助:(

回答

1
#primary_nav_wrap { 
width: 100%; 
background:#333; 
} 

只要给100%宽度和颜色的背景

+0

Omg,如此简单:D非常感谢! – WildCAt

0

只需将宽度为100%设置为#primary_nav_wrap#primary_nav_wrap ul

#primary_nav_wrap { 
 
    margin: 0; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
#primary_nav_wrap ul { 
 
    background-color: #333; 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#rectangle { 
 
    float: right; 
 
    position: relative; 
 
    width: 1200px; 
 
    overflow: hidden; 
 
    background: #333; 
 
} 
 

 
#primary_nav_wrap ul a { 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-weight: 500; 
 
    line-height: 50px; 
 
    padding: 0 20px; 
 
    font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif 
 
} 
 

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

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

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

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

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

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

 
#primary_nav_wrap ul ul ul { 
 
    top: 0; 
 
    left: 100% 
 
} 
 

 
#primary_nav_wrap ul li:hover>ul { 
 
    display: block 
 
}
<nav id="primary_nav_wrap"> 
 
    <ul> 
 

 
    <li class="current-menu-item"><a href="#">Home</a></li> 
 
    <li><a href="#">Portfolio</a> 
 
     <ul> 
 
     <li><a href="#">About me</a></li> 
 
     <li><a href="#">Menu1</a></li> 
 
     <li><a href="#">MenuMenu</a></li> 
 
     <li><a href="#">MenuMenuMenu</a></li> 
 
     </ul> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a> 
 
     <ul> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenu</a></li> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenuMenu</a></li> 
 
      <li><a href="#">MenuMenu</a></li> 
 
      <li><a href="#">Menu</a></li> 
 
      <li><a href="#">WutWut</a></li> 
 

 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a></li> 
 

 
    </ul> 
 
    <!-- 
 
    <div id="rectangle"></div> 
 
    --> 
 
</nav>