Выпадающие горизонтальные подменю на css

Подскажите, пожалуйста, как правильно написать css код для 2,3 и последующих подменю, чтобы при наведении на Wordpress, далее, при наведении на Tutorials выходили только пункты подменю (Stuff, Things и Other stuff), а пункты Themes и Plugins оставались на своих местах и не перемещались.

И что написано не так во втором варианте для pod-menu?

1 вариант - на основе "ul"

код css

nav {
margin: 100px 0;
background-color: #E64A19;
}
nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:15px;
line-height: 40px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover > ul {
display:inline-block;
}
nav ul ul li {
min-width:20px;
float:none;
display:inline-block;
position: relative;
}
nav ul ul ul {
position: relative;
top:50;
left:0%;
}

код html

<nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">WordPress</a>
                    <!-- первый уровень выпадающего списка -->
                    <ul>
                        <li><a href="#">Tutorials</a>
                            <!-- второй уровень выпадающего списка -->
                            <ul>
                                <li><a href="#">Stuff</a></li>
                                <li><a href="#">Things</a></li>
                                <li><a href="#">Other Stuff</a></li>
                            </ul>

                        </li>
                        <li><a href="#">Themes</a></li>
                        <li><a href="#">Plugins</a></li>
                    </ul>

                </li>
                <li><a href="#">Graphic Design</a></li>
                <li><a href="#">Inspiration</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>

и 2 вариант - на основе ul class:

код css

body {
min-width: 300px;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
}
.main-menu {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #E5E5E5;
}
.main-menu > li {
display: inline-block;
margin-right: -4px;
position: relative;
}
.main-menu a {
display: block;
margin-left: -1px;
padding: 8px 10px;
color: #0088CC;
border-left: 1px solid #E5E5E5;
}
.main-menu a:hover {
background: #f5f5f5;
}
.main-menu .sub-menu {
position: absolute;
left: 1px;
width: 283px;
margin: 0;
padding: 0;
list-style: none;
background: #FCF8E3;
display:none;  
}
.main-menu .sub-menu a {
margin-right: -4px;
border: 1px solid #E5E5E5;  
}
.main-menu > li:hover .sub-menu {
display:block;
}
.sub-menu>li{
display:inline-block
}
.pod-menu{
position: absolute;
left: 1px;
width: 283px;
margin: 0;
padding: 0;
list-style: none;
background: #FCF8E3;
display:block;  
}

код html

<ul class="main-menu">
        <li><a href="#company">О компании</a></li>
        <li>
            <a href="#">Услуги</a>
            <ul class="sub-menu">
                <li><a href="#">Разработка</a>
                    <ul class="pod-menu">
                        <li><a href="#5">Подменю</a></li>
                    </ul>
                </li>
                <li><a href="#2">Продвижение</a></li>
                <li><a href="#3">Контекст</a></li>
            </ul>
        </li>
        <li><a href="#team">Сотрудники</a></li>
    </ul>

Спасибо!