Question

我的页面设计带有如下菜单：

Cat1    |     Cat2    |    Cat 3    |    Cat 4

当我将单词Cat2悬停时，整个Cat2盒的bgcolor变为蓝色。此外，整个单元格需要可点击并链接到其他页面。

我可以在没有符号“|”的情况下做到这一点通过改变表格单元格的bgcolor并使“a tag”的宽度为100％，“a tag”的高度为30px。但我想不出添加分隔符“|”的方法在它。

有没有人对此有任何想法？

Answer 1

在CSS中放置一个边框左边？或者它需要是一个文字栏角色？

Answer 2

您可以在CSS中使用相邻的兄弟选择器，通过将样式应用于基于其前面的元素的元素，您可以创建菜单分隔符。

.menu a {
    text-decoration: none;
    padding: 10px;
}
.menu a + a {
    border-left:solid 1px black;
}

通过使用此方法，您可以通过分配class =“menu”轻松地将此样式应用于任何菜单。

<div class="menu">
    <a href="#">Questions</a>  
    <a href="#">Tags</a> 
    <a href="#">Users</a> 
    <a href="#">Badges</a>
    <a href="#">Unanswered</a>
</div>

Answer 3

这符合所有要求;垂直条必须短于链接的高度。

使用＆lt;背景图像实现此目标可能最容易。 a＆gt;而不是使用边框或管道（|）。

我确实尝试过在链接内部有跨距的东西，它会短于A的整个高度，但是我无法让它干净利落。

您还可以在跨度内的HTML本身中添加管道，并在悬停时隐藏它们。

我知道这在所有浏览器中都无法正常工作，但黑客和变通办法是额外的。：P

编辑::我在此添加了@Fistandantilus'相邻选择器。使HTML更清晰。

       <html>
    <head>
        <title>Menu Test</title>


    <style type="text/css" media="screen">
        ul.menu { 
            display:block;
            margin:0; 
            padding:0;
            height:30px;
        }
        ul.menu li {
            display:block;
            width:100px;
            height:30px;
            float:left;

        }        

        ul.menu li a{
            width:100%;
            height:30px;
            line-height:30px;
            display:block;
            text-align:center;
            border-left:1px solid transparent;
        }
        ul.menu li + li a { 
            border-left:1px solid #000;
        }

        ul.menu li a:hover {
            background-color:#0f0;
            border-left:1px solid transparent;
        }
        ul.menu li:hover + li>a  {
            border-left:1px solid transparent;

        }



    </style>
    </head>


    <body>
        <ul class="menu">
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>
            <li><a href ="#">item</a></li>

        </ul>
    </body>
</html>

Answer 4

你不需要使用表格，CSS就是你这种事情的朋友！

我不是网页设计师，我的html / css技能有点生疏，但是你想要的是这样吗？

<html>

<head>

<style type="text/css">
#menu {
text-align: center;
}
#menu a {
text-decoration: none;
padding: 5px 40px;
}
#menu a:hover {
background-color: blue;
color: white;
}
</style>

</head>

<body>

<div id="menu">
<a href="#">Cat 1</a> |
<a href="#">Cat 2</a> |
<a href="#">Cat 3</a> |
<a href="#">Cat 4</a>
</div>

</body>


</html>

Answer 5

导航菜单应在语义上标记为列表。对于诸如此类的菜单，使用无序列表是非常常见的做法。请参阅this example on Listamatic以获取生产的基础。要使背景颜色大于文本，您只需在<a>标记周围添加填充。

HTML菜单帮助

5 个答案: