垂直菜单与左图像

Question

我在my site

上遇到了两个问题

我希望导航菜单看起来像附加图像：

我遇到的第一个问题是导航菜单显示在页面的右侧。我认为边缘设置正确，但菜单在撞到黄色边框的右侧后才出现。

第二个是左侧站点主体后面的小横幅。我为此创建了一个图像，但是当我尝试放置它时，它不会显示在正确的位置。现在我把它设置为重复，这样你就可以看到它的位置（以及一些时髦的定位）。有没有办法让显示在实际菜单链接下面的部分出现？

Answer 1

使用纯CSS可以达到这种效果。

<强> HTML

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58" id="menu-item-58">
    <a href="http://ranchocordovaeventscenter.com/?page_id=57">Building Facts</a>
    <div>
       <div class="wrap-behind"></div>
    </div>
</li>

<强> CSS

#extra-navbar .menu-item {
    margin-bottom: 0.9rem;
    margin-left: 20px;
}

.wrap-behind {
    background: none repeat scroll 0 0 #F9B233;
    border-left: 13px solid transparent;
    border-right: 1px solid #053053;
    border-top: 10px solid #053053;
    float: left;
    height: 0;
    width: 0;
}

#extra-navbar ul li {
    background-attachment: scroll;
    background-color: #104571;
    background-position: left bottom;
    background-repeat: no-repeat;
    color: #FFFFFF;
    overflow: visible;
}

Answer 2

div #page包含带有规则overflow: hidden;的class .site，它会导致第一个问题

Answer 3

在第1431行的style.css中，您拥有属性overflow: hidden。删除它，你会看到菜单左边的东西。这应该有助于你的问题。