所以我有这个导航菜单设置，尽管目前有 CSS 代码。背景颜色目前主要用于苦行者。我需要在这个设置上有一个背景图像。不幸的是，由于所提出的设计规范，它也不是真正的流动背景。所以就这样。
我需要制作这个背景和包含的元素，以使导航按照我希望根据整体窗口大小调整大小的方式工作。从桌面浏览器到移动设备。
有没有人知道单独使用 CSS 或结合 jQuery 之类的东西来实现这一点？我在某些平台上看到过类似的做法，但不知道他们是如何解决解决方案的
/* wrapper and master settings for over all containers */
#menu_bottom{position:absolute;bottom:0;left:0;z-index:999999;background-color:#F00;width:320px;height:172px;}
#menu_bottom > ul{list-style:none;margin:0;padding:0;}
#menu_bottom > ul > li{list-style:none;margin:0;padding:0;float:left;width:50px;height:172px;background-color:#000;}
/* inactive state (position) */
#menu_bottom > ul > li.fans{background-color:#0F0;}
#menu_bottom > ul > li.gameplan{background-color:#0F0;}
#menu_bottom > ul > li.dashboard{background-color:#0F0;}
#menu_bottom > ul > li.myteams{background-color:#0F0;}
#menu_bottom > ul > li.settings{background-color:#0F0;}
/* active state (position) */
#menu_bottom > ul > li.fans.active{background-color:#00F;}
#menu_bottom > ul > li.gameplan.active{background-color:#00F;}
#menu_bottom > ul > li.dashboard.active{background-color:#00F;}
#menu_bottom > ul > li.myteams.active{background-color:#00F;}
#menu_bottom > ul > li.settings.active{background-color:#00F;}
<div id="menu_bottom">
<ul>
<li rel="/" class="f<?php if($activeNav == "c"){echo ' active';} ?>"></li>
<li rel="/" class="g<?php if($activeNav == "n"){echo ' active';} ?>"></li>
<li rel="/" class="d<?php if($activeNav == "d"){echo ' active';} ?>"></li>
<li rel="/" class="m<?php if($activeNav == "f"){echo ' active';} ?>"></li>
<li rel="/" class="s<?php if($activeNav == "s"){echo ' active';} ?>"></li>
</ul>
</div>