html中用无序列表制作菜单，最小化网页出现的问题

我使用无序列表做的网页菜单。为什么最大化时好好的，当我收缩的时候，列表就乱了。请大神回答下。谢谢，新手想不出来，有图：



代码如下：
@charset "utf-8";
/* CSS Document */
#whole{ text-align:center;}
#head{ background-color:#000; height:536px; }
#titlebar{ background-color:#000; height:50px; margin-top:-19px }
#titlebar .headlist{ margin-left:20%;}
#titlebar .headlist li { list-style-type:none; color:#FFF; font-size:18px; float:left; width:80px; height:16px; text-align:center; background-color:#000; padding:16px;}
#titlebar .headlist .a1{ width:220px; margin-left:240px;}
#rump{ margin-top:600px; background-color:#000; color:#FFF; font-size:10px; height:90px;}
#rump .rumfot1{ margin-top:20px}

不管是无序列表还是有序列表，

这种元素我才是块元素，我猜你肯定是采用的了浮动布局，float，这种布局，窗口变小时会自动折行，除非你把父层级别的

布局写位置的时候不要用%，直接用数值100px 这样试试看会不会解决