我一直在努力寻找答案,我不知道我是不是很擅长搜索或者是什么,但我似乎无法找到解决方案。
基本上我有一个名为'menu'(#menu)的DIV,它是一个横跨浏览器屏幕顶部的蓝色条,在其中我设置了一个无序列表(创建按钮)和锚点(列表内部有填充(为了文本间隔很好),因此创建一个漂亮的按钮,但是,当我这样做时,超链接导致行在菜单div上流动,使其看起来很乱,下面是我的代码,无论如何都要阻止这个?
HTML:
<div id="menu">
<ul>
<li><a href="#">test</a></li>
</ul>
</div>
CSS:
* { font-family: Helvetica; }
body { margin: 0; background: #fff; }
#menu { overflow: inline-block; width: 100%; background: #0b9be5; text-align: center; }
#menu ul { background: #075f8d; poistion: absolute; margin: 0px; list-style-type: none; }
#menu li { display: inline; }
#menu a { padding: 1%; border: 1px solid black; font-weight: bold; color: black; text-decoration: none; }
#menu a:hover { background-color: #0b9be5; }
提前谢谢!
亲切的问候
马修
答案 0 :(得分:0)
我为你做了一个全新的代码!
我建议您查看此网站http://css.maxdesign.com.au/listamatic/以获取更多选项。
CSS就像这样
.menu-menu-container{
position: absolute;
}
ul{
list-style: none;
}
li{
border:#996600 1px solid;
float: left;
margin-left: 14px;
}
li a{
color:#000;
text-decoration:none;
background: #00F;
display: block;
padding:20px;
}
a:hover{
background:#33FFFF;
}
HTML可能就像这样
<div class="menu-menu-container">
<ul id="menu-menu-1" class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143"><a href="http://origenes.co">HOME</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142"><a href="http://origenes.co/corporativo/">Corporativo</a></li>
</ul>
</div>