菜单栏显示问题求助：添加Logo导致菜单栏高度增加+子菜单选项无法显示

Hi Jean, let's break down and fix your two menu problems step by step:

1. Fixing the Unexpected Menu Bar Height After Adding the Logo #

The extra height is coming from the margin-top: 20px on your .imgBarra class—this pushes the logo down and forces the entire menu bar to expand. Instead of using margins to position the logo, let's align it properly with the rest of the navigation items:

Updated CSS for the Logo: #

.imgBarra {
  width: 30px;
  height: 30px;
  /* Remove margin-top that's causing the height issue */
  margin: 0 10px 0 -20px;
  /* Align logo vertically with navigation links */
  vertical-align: middle;
}

We also need to make sure the parent menu container handles alignment well. If your .Barra isn't already using flex, adding this will keep all items perfectly aligned:

.Barra {
  display: flex;
  align-items: center;
  /* Add your menu background color here, e.g., background: #333; */
}

2. Making the Submenu Visible on Hover #

Right now your submenu is set to visibility: hidden but there's no trigger to show it when hovering over the parent menu item. Let's add the hover state, plus a few tweaks to make it work smoothly:

Updated Submenu CSS: #

.submenu {
  position: absolute;
  background: #e8e8e8;
  width: 120%;
  visibility: hidden;
  /* Add these to ensure the submenu doesn't break layout */
  opacity: 0;
  transition: opacity 0.3s ease;
  top: 100%; /* Position submenu directly below the parent item */
  left: 0;
  z-index: 100; /* Ensure submenu stays above other content */
}

/* Show submenu when hovering over the parent list item */
.Barra li:hover .submenu {
  visibility: visible;
  opacity: 1;
}

.submenu li a {
  display: block;
  padding: 15px;
  color: #333; /* Changed from #fff since your submenu background is light gray */
  font-family: Arial;
  text-decoration: none;
}

.submenu li a:hover {
  background-color: aquamarine; /* Match the hover style of main menu links */
  color: black;
  transition: all .3s;
}

Key Changes Explained: #

• Added top: 100% and left: 0 to position the submenu directly below its parent item.
• Added opacity with a transition for a smoother hover effect (instead of just toggling visibility).
• Adjusted the submenu link color to #333 so it's readable against the light gray background.
• Added a hover state for the parent li element to trigger the submenu visibility.

Full Updated CSS #

Here's the complete CSS with all fixes combined:

.Barra {
  display: flex;
  align-items: center;
  /* Add your menu background color here, e.g., background: #222; */
}

.imgBarra {
  width: 30px;
  height: 30px;
  margin: 0 10px 0 -20px;
  vertical-align: middle;
}

.Barra li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 20px;
  display: block;
}

.Barra li {
  display: inline-block;
  text-align: center;
  position: relative;
}

.Barra li a:hover {
  background-color: aquamarine;
  color: black;
}

.submenu {
  position: absolute;
  background: #e8e8e8;
  width: 120%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  top: 100%;
  left: 0;
  z-index: 100;
}

.submenu li a {
  display: block;
  padding: 15px;
  color: #333;
  font-family: Arial;
  text-decoration: none;
}

.submenu li a:hover {
  background-color: aquamarine;
  color: black;
  transition: all .3s;
}

.Barra li:hover .submenu {
  visibility: visible;
  opacity: 1;
}

Give these changes a try—your menu height should return to normal, and the submenu will show up when you hover over its parent item!

内容的提问来源于stack exchange，提问作者Jean Caret Almenar