Question

我正在尝试在下拉菜单下方放置一个黑色边框，然后选择＆＃34;＆＃34;页面目前是＆＃34; Home＆＃34;页面使用橙色边框加下划线。我试图在黑色边框上重叠橙色边框。

编辑有些人似乎很困惑，我想把橙色线放在黑线上面。 http://jsfiddle.net/46z5su4u/2/

有任何建议吗？

HTML：

<h1>Drop Down Menu</h1>
<header>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
      </li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>

CSS：

header
{
    border-bottom:4px solid #3a3a3a;
}

#primary_nav_wrap
{
    margin-top:15px;
    margin-bottom:-4px;
    position:relative;
}

#primary_nav_wrap ul
{
    list-style:none;
    float:left;
    margin:0;
    padding:0;
}

#primary_nav_wrap ul a
{
    display:block;
    text-decoration:none;
    line-height:32px;
    padding:0 15px;
    font-family:"Open Sans","Lucida Grande",Tahoma,"Trebuchet MS",Verdana,Arial,sans-serif;
    font-size:1.1em;
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#primary_nav_wrap ul li.current-menu-item
{
    border-bottom:4px solid #ff7500;
    font-weight:700;
}

#primary_nav_wrap ul li.current-menu-item a
{
    color:#333;
}

#primary_nav_wrap ul li a:hover
{
    color: #ff7500;
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#f8f8f8;
    padding: 0 12px;
    box-shadow: 0 2px 2px #ccc;
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:150px;
    border-bottom: solid 1px #f2f2f2;
    border-top: solid 1px #fff;
}

#primary_nav_wrap ul ul li:after
{
    content: "";
}

nav ul ul li:last-child a
{
    border-bottom: none;
}

nav ul ul li:first-child a
{
    border-top: none;
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 6px;
}

#primary_nav_wrap ul li:hover > ul
{
    display:block;
}

Answer 1

移动时可能需要较低的寄宿生？

#primary_nav_wrap ul li a:hover
{
  color: #ff7500;
  border-top: 4px solid #ff7500;/*add*/
}

Answer 2

试试这个http://jsfiddle.net/46z5su4u/1/

这是我添加的全部内容

#primary_nav_wrap ul li ul li {
border-bottom:1px solid orange;
}

Answer 3

固定 http://codepen.io/anon/pen/bfgvo

添加到html

<div class="clearBoth"></div>
<div id="top_blackline"></div>

添加到css

.clearBoth
{
    clear:both;
}

#top_blackline
{
    margin-top:-4px;
    width: 100%;
    border-bottom:4px solid #3a3a3a;
}

Answer 4

只需在第一级<li>s而不是<header>上设置黑色边框因此，更新的css代码将如下所示：

header {
    position: absolute; /* removed border */
}

/* add the following rule */

#primary_nav_wrap > ul > li {
    border-bottom:4px solid #3a3a3a;
}

仅使用直接子选择器<li>s在第一级>上设置暗边框，在此选择器here上设置更多。

上面代码的预览是here。

下拉菜单上的重叠边框

4 个答案: