css hover affect unrelated element - html

Question

I'm trying to show a relevant submenu when the user hovers over an item in the main menu. The problem I am having is that I need to have a common parent for the hover selector to do its magic, but then that seems to screw up my styling. Any suggestions that forgo javascript/jquery would be appreciated as I use that as a crutch too much for things that I should probably be solving with css alone.
HTML
<div id="header">
<div id="header_headline">
Heading
</div>
<div id="menu">
<div id="menu_inset">
HOME
PROFILE<div class="sub_menu_arrow"></div>
PROJECTS<div class="sub_menu_arrow"></div>
NEWS
CONTACT
</div>
</div>
<div id="sub_menu">
<div class="sub_menu_inset" id="sub_menu_profile">
1
2
3
</div>
<div class="sub_menu_inset" id="sub_menu_projects">
1
2
3
4
</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

You don't necessarily have to use <ul> and <li> elements. Although, you should avoid nesting <a> tags in <a> tags. I think this is what you might be trying to accomplish (hover over project):
http://jsfiddle.net/u9v0mcvo/1/
When making CSS-only drop downs, tooltips, or whatever, it helps to nest the initially hidden item in the element that is in charge of opening it.

Answer 2

Your menu's should be <ul> and the submenu should be <ul> inside the <li>s.
The sub ul should then be positioned absolutely and display: none. the top level <li>s should have a :hover that changes the inner <ul>s to disbplay block.