0

我一直在努力寻找答案，我不知道我是否只是不擅长搜索还是什么，但我似乎无法找到解决方案。

基本上我有一个名为“菜单”（#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; }

先感谢您！

亲切的问候

马修

4

1 回答 1

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>
于 2012-09-11T20:35:11.163 回答