Tell me, please, how to write the css code for 2,3 and the following submenus correctly, so that when you hover over Wordpress, then, when you hover over Tutorials, only submenu items (Stuff, Things and Other stuff) left, and Themes and Plugins remained on their places and did not move.

And what is written wrong in the second version for pod-menu?

Option 1 - based on "ul"

css code

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 code

 <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>

and option 2 - based on ul class:

css code

 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 code

 <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>

Thank!

    0