Dropdown Navigation Menu Problems Need CSS Help
-
I have made a child theme from the ‘Social Triggers Theme for Zippy Courses.’ A support tech for Zippy Courses just fixed a big issue, but now I have some final problems with my CSS dropdown menu—which I added to the theme which initially only had one menu.
1. The background upon hover is supposed to be directly on top of the navbar/container background and it is shifted slightly downward. Oddly, it is not shifted down on my internal e-course pages where I have other issues.
Do I need to change padding on the hover selector?
2. There seems to be some z-index issues with my dropdown.
a. The theme has a title bar which appears on top of the dropdown menu. I’ve tried a 0, 1 and 100 z-index with no changes.
b. On my welcome page the dropdown appears where it should, but the title bar covers part of it.
c. On an internal page introducing various e-courses the drop down switches to horizontal. On that page the title bar is thicker.
d. On an internal course page there is a breadcrumb below the menu and then the title bar. The breadcrumb does not appear on top of the dropdown, rather the drop down starts below the breadcrumb. The actual breadcrumb text is set to start after all of my nav links on the horizontal axis, so directly below the links it’s just a blank space. This makes it impossible to click on anything in the drop down because when my cursor crosses the skipped area, the dropdown disappears./*The first style ensures that the navigation menu does not affect other elements on the page. We accomplish this with the “position: absolute;” style. When you position an element absolutely, it is taken out of the flow of the page. In other words, it’s ignored by other elements. This is quite important as you don’t want your drop-down menus to push other elements down, which they would do otherwise.*/ .all-nav-cont{ margin-left: -15px; margin-right: -15px; } .all-nav{ width: 100%; background-color: #b7f5d7; height:38px; /* Ensures that the menu doesn’t affect other elements */ z-index:0; margin-bottom: 0; padding-top: 5px; } .all-nav ul { background-color: #b7f5d7; text-align: center; padding: 0; color: #c91640; line-height:38px; } .all-nav li { float: left; /* This lines up the menu items horizontally */ list-style: none; /* Removes the default styling (bullets) for the list */ text-align: center; /* All text is placed in the center of the box */ background: #b7f5d7; } /*The next code styles the anchor tags that are found in each list item. Each anchor tag is the same size and shape as the list item.*/ .all-nav a { display: block; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; text-decoration: none; /* Removes the default hyperlink styling. */ color: #c91640; font-size: 100%; font-family: Georgia, Verdana, Arial, sans-serif; } .all-nav a:hover { background-color: #82bfa2; color: #ffffff; line-height:38px; padding-top: -50px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; } .all-nav a.active { background-color: #82bfa2; color: #8a2be2; } /*The next two styles are related. The first style hides the drop-down menu, while the second style displays it when a mouse pointer is hovered over the main menu item.*/ .all-nav li ul { display: none; /* Hides the drop-down menu */ margin: 0px; /* Aligns drop-down box underneath the menu item */ padding: 0px; } .all-nav li:hover ul { display: block; /* Displays the drop-down box when the menu item is hovered over */ position:absolute; } .sub-menu .menu-item { float: none; }
The topic ‘Dropdown Navigation Menu Problems Need CSS Help’ is closed to new replies.