CSS懸停影響無關元素

Question

當用戶將鼠標懸停在主菜單中的某個項目上時，我試圖顯示一個相關的子菜單。 我遇到的問題是，懸停選擇器需要具有共同的父對象才能發揮其魔力，但這似乎使我的樣式搞砸了。 放棄javascript / jquery的任何建議將不勝感激，因為我將它用作拐杖，對於我可能應該單獨使用css來解決的事情來說，太多了​​。

HTML

<div id="header">
    <div id="header_headline">
        Heading
    </div>
    <div id="menu">
        <div id="menu_inset">
            <a href="#" class="menu_item" id="menu_item_home">HOME</a>
            <a href="#" class="menu_item" id="menu_item_profile">PROFILE<div class="sub_menu_arrow"></div></a>
            <a href="#" class="menu_item" id="menu_item_projects">PROJECTS<div class="sub_menu_arrow"></div></a>
            <a href="#" class="menu_item" id="menu_item_news">NEWS</a>
            <a href="#" class="menu_item" id="menu_item_contacts">CONTACT</a>
        </div>
    </div>
    <div id="sub_menu">
        <div class="sub_menu_inset" id="sub_menu_profile">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>               
        </div>
        <div class="sub_menu_inset" id="sub_menu_projects">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>               
            <a href="#">4</a>               
        </div>
    </div>
</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: 'Pathway Gothic One', sans-serif;
    color: #212121;
}

a {
    text-decoration: none;
    color: #212121;
}

#header {
    width: 100%;
}

#header_headline {
    margin: 1em 1em 1em 1em;
    font-size: 2em;
    text-transform: uppercase;
}

#menu {
    margin-top: 1em;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

#menu_inset {
    display: inline-block;
    word-spacing: 5em;
}

.menu_item {
    position: relative;
}

.menu_item:hover .sub_menu_arrow {
    display: inline-block;
}

#menu_item_profile:hover ~ #sub_menu_profile {
    display: inline-block;
}

#menu_item_people:hover ~ #sub_menu_people {
    display: inline-block;
}

.sub_menu_arrow {
    position: absolute;
    display: none;
    left: 0;
    width: 100%;
    bottom: -1.05em;
}
.sub_menu_arrow:after {
    content: '';
    margin: 0 auto;
    border-width: 0 .5em .5em;
    border-style: solid;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
}

#sub_menu {
    margin-top: 1em;
    background-color: #CCCCCC;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    position: relative;
    height: 2em;
}

.sub_menu_inset {
    display: none;
    top: 0.5em;
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #CCCCCC;
    word-spacing: 5em;
}

http://jsfiddle.net/u9v0mcvo/

Answer 1

你的菜單的應該是<ul>和子菜單應該是<ul>內部<li>秒。 然后應該完全定位sub ul並顯示：none。 頂級<li>應當具有：hover，它將內部的<ul>更改為disbplay塊。

Answer 2

您不一定必須使用<ul>和<li>元素。 雖然，你應該避免嵌套<a>在標簽<a>標簽。 我認為這是您可能要完成的任務（將鼠標懸停在項目上）：

http://jsfiddle.net/u9v0mcvo/1/

在制作僅CSS的下拉菜單，工具提示等時，它有助於將最初隱藏的項目嵌套在負責打開它的元素中。