The arrangement of tabs within the navigation bar

I'm currently working on a Drop Down Navigation bar using CSS and HTML. The image below represents the desired outcome I am aiming for.

One issue I am facing is that in the code, OuterTab1 and OuterTab2 are consistently positioned lower than Tab2, even though I want them to be aligned at the same height like in the example image.

Apologies if this explanation is not very clear; you can also refer to this link for clarification: http://jsfiddle.net/442xM/

<nav>
    <ul>
        <li>Tab1</li>
        <li>Tab2
            <ul>
                <li>OuterTab1</li>
                <li>OuterTab2</li>
            </ul>
        </li>
    </ul>
</nav>
htmlcssdrop-down-menuuinavigationbar

Answer №1

To properly position the submenu that is absolutely positioned, you must make sure it is relative to the hovered list item. To do this, apply position:relative; to the <li>.

li {
    position:relative; /* don't forget this! */
    vertical-align: top;
    width: 120px;
    height: 20px;
    text-align: center;
    background-color: navy;
    padding: 10px;
}

Check out the demo here

Answer №2

Revamp your CSS with the following adjustments to perfect the element's positioning.

 .button {
display: inline-block;
text-align: center;
}
* {
font-family: sans-serif;
color: white;
}
nav {
background-color: black;
padding: 10px 0px 10px 0px;
width: 452px;
border-radius: 5px;
}
ul, ol {
list-style-type: none;
margin: 0px;
padding: 0px;
position: relative;
}
li {
vertical-align: top;
width: 100px;
height: 15px;
text-align: left;
background-color: black;
padding: 5px;
position:relative;
}
 li:hover {
background-color: grey;
}
nav ul ul {
display: none;
text-align: left;
position:absolute;
left:0;
top:100%;
}
nav ul li:hover > ul {
display: block;
}
ul ul ul {
position: absolute;
width: 100px;
left: 100%;
top:0;
z-index: 5;
padding:0;
margin:0;
}
.Arrow {
float: right;
}

FIDDLE DEMO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

Below is the code snippet provided: <div id="js"><button onclick="document.getElementById('js').innerHTML=('<form> <input type=text name=tick1></input> <input type=text name=tick2></input> ...

javascripthtmlfunction

When using jqueryprint.js to print from Firefox browser, an additional blank page appears before the content

Seeking assistance in printing a section of an HTML page using PHP with a large header space for empty space after printing. Despite multiple attempts, achieving the desired result in Chrome, but facing issues with Firefox, which adds an additional page be ...

jquerycsshtmlprinting

Setting the z-index property in CSS allows one element to stack above another

My website has a hamburger menu that causes an issue when I navigate to a specific page with a card element. Whenever I open the menu while on this page, the card element ends up overlapping with the menu inexplicably. Despite trying various solutions, I c ...

javascripthtmlcssreactjs

Tips for aligning CSS menu elements from right to left

Upon examining a purely CSS-generated drop-down menu, I came across the following example: http://jsfiddle.net/XPE3w/7/ I started to ponder on how I could adjust the alignment of items under the "About Us" tab from right to left. Currently, they are disp ...

htmlcssdrop-down-menumenu

Is it possible to establish borders in relation to the text?

Take a look at this image that illustrates my goal. What I want to achieve is having lines on both sides of a text element (usually a heading tag) that stretch out a specific distance (in this case, 65px). I'm looking for a solution that adjusts dyn ...

htmlcss

Tips for integrating v-virtual-scroll with v-table?

My Vuetify table is handling a large amount of data – 300 rows with 20 columns, some of which have calculated rowspans. To improve performance, I'm considering using the v-virtual-scroll component. I came across this sample code, which doesn't ...

javascripthtmlvue.jsvuetify.jsvuetifyjs3

A distinct alias for the identical custom control

Suppose we create a custom control, for example: [assembly: TagPrefix("CustomControls.UI", "custom")] public class CustomTextBox : TextBox { ... } When using this custom control in HTML code, we typically have to reference it like this: <custom:Cus ...

c#asp.nethtmlcustom-controls

"Basic npm module that does not come with any CSS code, featuring a React component that

I am working on developing a small and straightforward npm package that leverages react. The challenge I'm facing is the need to import the CSS file from the dist folder and have it automatically imported with the export. Is this achievable? import Re ...

cssreactjsnpm

The backface remains visible despite being designated as "hidden"

I have successfully created a "flip card" in CSS3, where the card flips downward to reveal the other side when a user hovers over it. I have ensured that the back face is not visible by setting backface-visibility to hidden. However, despite my efforts, th ...

javascriptjquerycss

Creating a unique Bootstrap 5 layout for various sized cards, inspired by the popular Pinterest design

I'm currently in the process of building a website using Bootstrap 5. One section of the website will feature various cards, similar to this example: https://i.sstatic.net/haNeN.png Each card on the site may vary in size depending on the content and ...

htmlcsstwitter-bootstrapmasonrybootstrap-5

Troubleshooting the ngClass Issue in My Angular Application

I am in the process of creating a form that requires validation. I am utilizing the following interface to define FieldError. export interface FieldError { errorAt: string; errorMessage: string; } In my component.html, I am employing [ngClass] to chec ...

htmlangularjsangulartypescriptng-class

Getting the dimensions of an image using a path in JavaScript

I am trying to display a div with an image, its name, size, and download link using jQuery. Here is the code I have created: var image = 'image/example.png' $('#download').attr("href", result2); $('.image').attr("src", re ...

javascriptjqueryhtmlimage

What could be causing my HTML element to vanish once the animation is complete?

I have successfully implemented an animation on 3 HTML elements for a landing page I am currently developing. The animations are working as intended, but I am facing an issue where the two lower elements (an h1 tag and a button) briefly appear on the page ...

htmlnext.jstailwind-csscss-animations

The div container is not expanding to full width on mobile screens when using Next.js and Tailwind CSS

My goal is to make my div stretch or go full width similar to the table on my page. I have experimented with max-w-full, w-screen, and w-full, but the div is not extending all the way... https://i.stack.imgur.com/8BJnI.png This is the code for my page. ...

htmlcssnext.jstailwind-cssresponsive

responsive full-screen navigation bar, combined with an image and text elements

I am completely new to Front end development, and this is my very first client project where I could really use some assistance. Could someone please guide me on how to ensure that everything on the website is responsive for mobile and tablet devices? Be ...

htmlcssreactjsflexboxresponsive-design

What is the proper way to incorporate quotation marks within other quotation marks?

Is there a way to generate an ID within the myFunction() function in JavaScript? I need a single string to call an HTML script as a variable. Any corrections or suggestions are welcome. Here is a sample code snippet: <button class="tablinks" onclick=" ...

javascripthtml

Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock. <div id="fb-root"></div><script>(function(d, s, id) {va ...

javascriptjquerycsshtmlfacebook-likebox

Is it recommended to apply the ARIA directory role to a breadcrumb navigation list?

Currently, I am working on enhancing the accessibility of a breadcrumbs component that is structured around a <ul> element. In my quest for solutions, I came across the concept of ARIA roles and specifically the directory role. While it seems like a ...

htmlcssaccessibilitywai-aria

Why doesn't the row-eq-height class apply to column heights?

For my WordPress theme coding, I rely on bootstrap 4 Struggling to understand why the row-eq-height class isn't functioning as expected in bootstrap columns. https://i.sstatic.net/R33K4.jpg Here are my codes: <?php get_header(); ?> <div ...

cssbootstrap-4

Combining the power of HTML5's picture tag with the flexibility of Bootstrap

I have been wanting to gain more control over my images on various screen sizes for quite some time now. Recently, I discovered the <picture> tag in HTML5. Currently, I am using Bootstrap 3. However, I'm not sure if it is effective to combine B ...

htmlcsstwitter-bootstrap