Question

我需要像这样创建菜单

         <div id="menu">
         <ul>
           <li><a href="#">start
            <div id=underline></div>
            </a></li>
           <li><a href="#">projekty</a></li>
           <li><a href="#">realizacje</a></li>
           <li><a href="#">kontakt</a></li>
         <div class="clear"></div>
         </ul>
         </div>

我可以参考链接虽然ul li a：hover，但这个解决方案不是最好的，因为下划线的宽度取决于文本的宽度。我想更广泛的下划线。当我将鼠标链接到下划线时应将颜色更改为红色。

我试过这样的事情

#menu ul li a div:hover{
 color: #339900;
 border-bottom: 1px solid #ff0000;
 width:300px;  
}

但它对我不起作用

我的问题是，当链接（a）将被使用时，我如何引用称为下划线的div（在CSS样式中）。

Answer 1

请尝试：<div id=underline> </div>

您的<div id=underline></div>内容没有内容，请在其中加入一些文字。

示例

＆＃13;

#menu ul li a div:hover {
  color: #339900;
  border-bottom: 1px solid #ff0000;
  width: 300px;
}

＆＃13;

<div id="menu">
  <ul>
    <li><a href="#">start
            <div id=underline>&nbsp;</div>
            </a>
    </li>
    <li><a href="#">projekty</a>
    </li>
    <li><a href="#">realizacje</a>
    </li>
    <li><a href="#">kontakt</a>
    </li>
    <div class="clear"></div>
  </ul>
</div>

＆＃13;

Answer 2

我认为您期待如下的内容。在此示例中，当鼠标悬停在链接上时，它会将其转换为红色下划线边框。

＆＃13;

#menu a {
    color: #FFF;
    background-color: #252525;
    text-decoration: none;
    border-bottom: white solid 1px;
    padding: 15px;
}
#menu a:hover {
    color: #FFF;
    background-color: #252525;
    border-bottom: red solid 1px;
}

#menu{
  background-color:black;
  line-height:60px;
  text-align:center;
}

＆＃13;

<div id="menu">
  <a href="#">start</a>
  <a href="#">projekty</a>
  <a href="#">realizacje</a>
  <a href="#">kontakt</a>
</div>

＆＃13;

Answer 3

你可以尝试这样的事情。这应该工作

    #menu ul li:hover {
        color: #339900;
        border-bottom: 1px solid #ff0000;
    }

Answer 4

<div id="menu">
         <ul>
           <li><a href="#">start
            <div id="underline"><span class="noDisplay">start</span></div>
            </a></li>
           <li><a href="#">projekty</a></li>
           <li><a href="#">realizacje</a></li>
           <li><a href="#">kontakt</a></li>
         <div class="clear"></div>
         </ul>
         </div>

Css：

.noDisplay{visibility: hidden;}

我认为div会采用与文本相同的宽度。

在链接中强调div

4 个答案:

示例