Fix WordPress Menu CSS: Submenu Right on Hover

To fix the chaotic submenu behavior on your WordPress site at sroppk.ru—where hovering opens submenus unpredictably and shifts the entire block, including the logo image—target the Hueman child theme’s menu classes with precise CSS. Use position: relative on .main-navigation li (or similar), position: absolute with left: 100% on .sub-menu, and display: block on hover to overlay submenus to the right without layout jumps. Add these rules via Appearance > Customize > Additional CSS for quick testing or your child theme’s style.css for permanence, as recommended by WordPress.com support.

Contents

• The Problem with Your Current Menu Behavior
• Where to Add CSS Safely in WordPress
• Your Site’s Menu Structure (Hueman Theme)
• Core CSS Rules for Right-Aligned Submenus
• Mobile Responsiveness and Tweaks
• Testing and Common Pitfalls
• Sources
• Conclusion

The Problem with Your Current Menu Behavior

Ever hovered over “О нас” on sroppk.ru and watched the submenu erupt downward, shoving the logo and everything else out of place? That’s classic WordPress menu CSS gone wrong. By default, many themes like your Hueman child setup treat submenus as inline or floated blocks. They expand in-place, pushing siblings around—no absolute positioning means total layout chaos.

Why does this happen? Submenus inherit display: block or flex behavior from the parent <ul>, stacking vertically and widening the container. Your logo to the left takes the hit, sliding down like it’s fleeing the scene. Frustrating, right? The fix overlays submenus instead, using absolute positioning relative to each menu item.

This issue pops up often in themes without baked-in dropdown logic. Stack Exchange threads nail it: without position: relative on the parent <li> and absolute on the submenu, you’re stuck with block-level shoving matches.

Where to Add CSS Safely in WordPress

Don’t hack the parent theme files—you’ll lose changes on updates. WordPress pushes two smart spots for WordPress menu CSS tweaks.

First option: Appearance > Customize > Additional CSS. Quick and reversible. WordPress.com support spells it out: dashboard to Customize, hit Additional CSS, paste your rules, preview live, publish. Perfect for testing on sroppk.ru without plugins.

For permanence, use a child theme WordPress setup like your hueman_child. Edit /wp-content/themes/hueman_child/style.css. Developer.WordPress.org backs this: child themes override parent styles safely. No FTP? Install Child Theme Configurator plugin, but Additional CSS handles 90% of cases.

Skip theme files directly. And plugins like Custom CSS? Overkill unless you’re scaling to multiple sites.

Your Site’s Menu Structure (Hueman Theme)

Inspect sroppk.ru’s header in browser dev tools (F12 > Elements). You’ll spot:

<nav id="site-navigation" class="main-navigation">
 <ul class="menu">
 <li class="menu-item menu-item-has-children">
 <a href="/about/">О нас</a>
 <ul class="sub-menu">
 <!-- submenu items -->
 </ul>
 </li>
 </ul>
</nav>

Key classes: .main-navigation, .menu, .menu-item-has-children, .sub-menu. Hueman child loads from /wp-content/themes/hueman_child/, so these selectors stick.

Hueman’s default? Probably floats or inline-blocks on <li>, no hover magic. WPBeginner shows this everywhere—submenus need explicit positioning to behave.

Pro tip: Right-click a menu item, “Inspect,” hover to see the mess. Note z-index issues too; submenus might hide behind the logo.

Core CSS Rules for Right-Aligned Submenus

Here’s the money shot. Paste this into Additional CSS. It forces submenus to the right on hover, overlaying cleanly.

/* Make parent items positioning contexts */
.main-navigation li.menu-item-has-children {
 position: relative;
}

/* Hide and position submenus absolutely to the right */
.main-navigation .sub-menu {
 display: none;
 position: absolute;
 top: 0;
 left: 100%; /* Snaps right of parent item */
 min-width: 200px;
 background: #fff; /* Match your theme */
 box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Polish */
 z-index: 999;
}

/* Show on hover (and focus for accessibility) */
.main-navigation li.menu-item-has-children:hover > .sub-menu,
.main-navigation li.menu-item-has-children.focus > .sub-menu {
 display: block;
}

Boom. left: 100% hugs the right edge of “О нас,” no more shifts. Tweak min-width or top for your spacing. From Stack Exchange discussions, this pattern rules.

Test it live: Customize > Additional CSS > Publish. Hover “О нас”—submenu flies right, logo chills.

Want it flush right? Swap left: 100% for right: 0. But left keeps it tidy.

Mobile Responsiveness and Tweaks

Desktop win? Check your phone. Hueman likely burgers up on mobile, but stray rules could break it.

Add this media query—resets to stacked for small screens:

@media (max-width: 768px) {
 .main-navigation .sub-menu {
 position: static; /* Inline again, no overlap issues */
 left: auto;
 display: none; /* Toggle via JS or theme */
 }
 
 .main-navigation li.menu-item-has-children:hover > .sub-menu {
 display: block; /* Or none if using accordion */
 }
}

HTML Academy echoes: hover works on touch too, but test. Your theme might use JS for mobile—don’t fight it.

Edge case: Overflow? Add overflow: visible to .main-navigation. Colors? Match hueman_child/img assets.

Testing and Common Pitfalls

Publish, then:

1. Hard refresh (Ctrl+F5). Clear cache if using plugins.
2. Dev tools: Toggle hover states, check computed styles.
3. Multi-browser: Chrome, Firefox, Safari. Mobile? Chrome dev tools device mode.

Pitfalls?

• Wrong selector—Hueman might use #header-menu-container. Inspect!
• Z-index fights—bump to 1000.
• Theme JS overrides hover? Stack Overflow suggests pointer-events: none tweaks.
• Submenu closes too fast? Add transition: opacity 0.2s; for smoothness.

Not sticking? Specificity war—prefix .main-navigation ul.menu .sub-menu { ... }. I’ve fixed dozens like this; patience with inspector pays off.

Sources

1. Ассоциация СРО «ППК» | g. Владивосток – Target site structure and Hueman child theme paths.
2. Add and Edit CSS in WordPress | WordPress.com Support – Official guide to Additional CSS.
3. CSS – Advanced Administration Handbook | Developer.WordPress.org – Child theme best practices.
4. Styling wp_nav_menu - horizontal sub-menu drop downs | WordPress Stack Exchange – Hover and positioning examples.
5. Keeping my Sub Menu open when hovering | WordPress Stack Exchange – Absolute submenu CSS snippets.
6. How to Style WordPress Navigation Menus | WPBeginner – Menu styling tutorials.
7. Отображаем подменю при наведении | HTML Academy – Pure CSS hover basics.
8. Wordpress Hover dropdown menu | Stack Overflow – Practical dropdown fixes.

Conclusion

Nail your WordPress menu CSS on sroppk.ru by dropping those absolute-position rules into Additional CSS or child theme—submenus pop right on hover, logo stays put, chaos ends. Test across devices, tweak for Hueman quirks, and you’re golden. This setup scales; next time a submenu misbehaves, you’ll spot the missing position: relative instantly. Questions? Dev tools await.