Is there a way to center align the Submenu container? I attempted using margin-left but it didn't work.
#moz_page .moz_menu_items ul {
position: absolute;
top: -9999px;
display: block;
width: 220px;
background-color: #F6D9E8;
background: rgba(246,217,232,1);
margin: 0;
padding: 0;
list-style: none;
}
Visit the website:
Your assistance would be greatly appreciated.
To shift it towards the left, simply utilize the "left:" property.
Give this a shot
#moz_page .moz_menu_items ul {
position: absolute;
top: -9999px;
display: block;
width: 220px;
background-color: #F6D9E8;
background: rgba(246,217,232,1);
margin: 0;
padding: 0;
list-style: none;
left: -50px; // feel free to adjust it as needed
}
Trust this guidance proves beneficial.
nav#menu {
background-color: #FFFF00;
border-width: 0px 0px 2px 0px;
height: 35px;
}
#menu_inner_in {
width: 100%;
height: 46px;
text-align: center;
position: relative;
margin: 0 auto;
}
.separator
{
border-style: solid; border-width: 0px 27px 17px;
-moz-border-image: url(http://example.com/images/seperator.png) 0 27 17 repeat;
-webkit-border-image: url(http://example.com/images/seperator.png) 0 27 17 repeat;
-o-border-image: url(http://example.com/images/seperator.png) 0 27 17 repeat;
border-image: url(http://example.com/images/seperator.png) 0 27 17 fill repeat;
}<nav id="menu">
<div id="menu_inner_in">
<h3 class="menu-toggle">Menu</h3>
<ul>
<li>One</li>
<hr class="separator">
<li><a href="#">Two</a></li>
<hr class="separator">
<li><a href="#">Three</a></li>
<hr class="separator">
<li><a href="#">Et coetera</a></li>
</ul>
</div>
</nav>Here's the CSS applied when the dropdown menu is displayed:
#my_page .my_menu_options li:hover ul.submenu {
height: auto;
border-radius: 0px 0px 15px 15px;
border: 1px solid rgba(0, 0, 0, 0);
display: block;
font-size: 0px;
padding: 5px;
z-index: 200;
top: 25px;
left: 5px;
}
If you need to adjust the position of the submenu, try modifying the "left" property (in pixels or percentage). Keep in mind that since your main menu items have varying widths, finding a universal value for all submenus may be challenging.
I have successfully created a clickable image on Codepen <div style="width: 1000px; height: 993.73px;"> <img src="https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/Testmap.svg" alt=&q ...
In my React application, I am utilizing CSS modules. By configuring modules:true in my webpack.config.js, I can successfully apply styles from files within my src folder. However, when importing components from node-modules, the corresponding CSS is not be ...
In my current project, I am in the process of calculating the week count, Non week count, and Row Total based on the provided dates. You can view a demo of the functionality on JSFiddle here. This is a snippet of my HTML code: Your HTML code goes here.. ...
I am currently working on an HTML form that includes a textbox for the user to enter their username and a login button. I want the database to be queried when the user clicks the login button and if there is a match, I would like to echo out a statement. T ...
Consider the HTML code below: <form> <p> <label for="id_name">Name:</label> <input id="id_name" maxlength="40" name="name" type="text"> </p> <p> <label for="id_format">Fo ...
I am facing an issue with my form layout while trying to capture user input. The use of Bootstrap is creating two columns for text boxes and their labels, but the alignment goes off track with the last EditorFor element. I'm questioning if I am misusi ...
Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...
Apologies for the lengthy description, but I want to provide as much detail as possible. I recently encountered an issue (which I managed to resolve, but the root cause eluded me). The crux of the problem was that when resizing the browser, specificall ...
Having trouble setting up a filter? I need to create a feature where checked values from checkboxes are displayed in a specific div after submitting. The display should include a 'Clear All' button and individual 'X' buttons to remove e ...
I want to show the query results on the same page as the button that triggers the query without any redirection. Here is my current setup: <form action="action.php" method="post"> <input type="submit" class="button" id="mail-button" name=' ...
While browsing through content, I stumbled upon a query regarding the impact of transform: translate3d(0,0,0) or transform: translateZ(0) on enabling CSS3 hardware acceleration for animations across different platforms and browsers. It mentioned that combi ...
I am currently utilizing Bootstrap 4 to construct a table with an action column housing a dropdown menu. My objective is for that specific column to remain fixed in place, ensuring it remains visible even when there is horizontal scrolling. The issue I am ...
I am having trouble with positioning the footer so that it always stays at the bottom of the page. When there is not enough content on the page, the footer does not reach the bottom as desired. Additionally, the footer does not have a fixed height. Below i ...
Need Help Clarifying My Issue: I currently have a Div with Page 1 content. Page 1 contains a button that transitions the div content to Page 2. Page 2 has a button that switches the div content back to Page 1. The Problem: If Page 1 is loaded first, t ...
Upon hovering over MTH025-ENG111, I would like it to become visible. Any additional tips or tools you have to assist me with this are greatly appreciated. <html> <head> <title> join the club </title> </ ...
Take a look at in both Internet Explorer and Chrome. The header tags (h1 through h6) all have font specifications that rely on a javascript fonts.com specification. However, there seems to be an issue with rendering properly. Interestingly, the fonts ar ...
For instance, I have 3 different tags with unique target-data for each one. <a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#firstdata"> DATA 1 </a> <a class=&q ...
Looking at the json array below, it shows a nested structure with multiple levels of children elements: { "id": 1, "children": [ { "id": 2, "children": { "id": 3, "children": { "id": 4, ...
My current setup involves a simple HTML form with a submit button that triggers my PHP script to process the input. However, I've encountered an issue where my PHP code fails to recognize the quotation mark when using str_replace function. Below is a ...
When the content exceeds the parent's width, the property overflow-x displays a scrollbar. However, I would prefer to show three dots "..." instead of the scrollbar. Is there a way to do this? ...