Creating a vertical navigation menu and displaying its submenu on corresponding pages in a horizontal layout

I'm struggling to design a navigation layout for my website where I want to display the main menu items like this:

  • Menu 1
  • Menu 2
  • Menu 3
  • Menu 4
  • Menu 5

and have their respective sub-menus displayed horizontally on their main menu pages like this:

  SubMenu 1.1 | SubMenu 1.2 | SubMenu 1.3 | SubMenu 1.4 | SubMenu 1.5 | ...

I should mention that my site is a single-page application that dynamically loads content into a div using jQuery Ajax. The loaded pages contain only the required content without any additional HTML elements like <html>, <head>, or <body>. So, what I want is when I click on "Menu 1" and the corresponding page loads, the sub-menus from "SubMenu 1.1" to "SubMenu 1.12" should be displayed horizontally on that page at the same time, while keeping "Menu 1" active. Please refer to the image below.

Here is the code I currently have, which results in a dropdown instead of the desired horizontal layout - you can see it in this JSFiddle.

<nav>
    <ul>
        <li><a href="#Menu 1">Menu 1</a>
            <ul>
                <li><a href="#SubMenu 1.1">SubMenu 1.1</a></li>
                <li><a href="#SubMenu 1.2">SubMenu 1.2</a></li>
                <li><a href="#SubMenu 1.3">SubMenu 1.3</a></li>
                <li><a href="#SubMenu 1.4">SubMenu 1.4</a></li>
                <li><a href="#SubMenu 1.5">SubMenu 1.5</a></li>
                <li><a href="#SubMenu 1.6">SubMenu 1.6</a></li>
                <li><a href="#SubMenu 1.7">SubMenu 1.7</a></li>
                <li><a href="#SubMenu 1.8">SubMenu 1.8</a></li>
                <li><a href="#SubMenu 1.9">SubMenu 1.9</a></li>
                <li><a href="#SubMenu 1.10">SubMenu 1.10</a></li>
                <li><a href="#SubMenu 1.11">SubMenu 1.11</a></li>
                <li><a href="#SubMenu 1.12">SubMenu 1.12</a></li>
            </ul>
        </li>
        <li><a href="#Menu 2">Menu 2</a>
            <ul>
                <li><a href="#SubMenu 2.1">SubMenu 2.1</a></li>
                <li><a href="#SubMenu 2.2">SubMenu 2.2</a></li>
                <li><a href="#SubMenu 2.3">SubMenu 2.3</a></li>
                <li><a href="#SubMenu 2.4">SubMenu 2.4</a></li>
                <li><a href="#SubMenu 2.5">SubMenu 2.5</a></li>
                <li><a href="#SubMenu 2.6">SubMenu 2.6</a></li>
                <li><a href="#SubMenu 2.7">SubMenu 2.7</a></li>
                <li><a href="#SubMenu 2.8">SubMenu 2.8</a></li>
                <li><a href="#SubMenu 2.9">SubMenu 2.9</a></li>
                <li><a href="#SubMenu 2.10">SubMenu 2.10</a></li>
                <li><a href="#SubMenu 2.11">SubMenu 2.11</a></li>
                <li><a href="#SubMenu 2.12">SubMenu 2.12</a></li>
            </ul>
        </li>
        <li><a href="#Menu 3">Menu 3</a>
            <ul>
                <li><a href="#SubMenu 3.1">SubMenu 3.1</a></li>
                <li><a href="#SubMenu 3.2">SubMenu 3.2</a></li>
                <li><a href="#SubMenu 3.3">SubMenu 3.3</a></li>
                <li><a href="#SubMenu 3.4">SubMenu 3.4</a></li>
                <li><a href="#SubMenu 3.5">SubMenu .5</a></li>
                <li><a href="#SubMenu 3.6">SubMenu 35.6</a></li>
                <li><a href="#SubMenu 3.7">SubMenu 3.7</a></li>
                <li><a href="#SubMenu 3.8">SubMenu 3.8</a></li>
                <li><a href="#SubMenu 3.9">SubMenu 3.9</a></li>
                <li><a href="#SubMenu 3.10">SubMenu 3.10</a></li>
                <li><a href="#SubMenu 3.11">SubMenu 3.11</a></li>
                <li><a href="#SubMenu 3.12">SubMenu 3.12</a></li>
            </ul>
        </li>
        <li><a href="#Menu 4">Menu 4</a>
            <ul>
                <li><a href="#SubMenu 4.1">SubMenu 4.1</a></li>
                <li><a href="#SubMenu 4.2">SubMenu 4.2</a></li>
                <li><a href="#SubMenu 4.3">SubMenu 4.3</a></li>
                <li><a href="#SubMenu 4.4">SubMenu 4.4</a></li>
                <li><a href="#SubMenu 4.5">SubMenu 4.5</a></li>
                <li><a href="#SubMenu 4.6">SubMenu 4.6</a></li>
                <li><a href="#SubMenu 4.7">SubMenu 4.7</a></li>
                <li><a href="#SubMenu 4.8">SubMenu 4.8</a></li>
                <li><a href="#SubMenu 4.9">SubMenu 4.9</a></li>
                <li><a href="#SubMenu 4.10">SubMenu 4.10</a></li>
                <li><a href="#SubMenu 4.11">SubMenu 4.11</a></li>
                <li><a href="#SubMenu 4.12">SubMenu 4.12</a></li>
            </ul>
        </li>
        <li><a href="#Menu 5">Menu 5</a>
            <ul>
                <li><a href="#SubMenu 5.1">SubMenu 5.1</a></li>
                <li><a href="#SubMenu 5.2">SubMenu 5.2</a></li>
                <li><a href="#SubMenu 5.3">SubMenu 5.3</a></li>
                <li><a href="#SubMenu 5.4">SubMenu 5.4</a></li>
                <li><a href="#SubMenu 5.5">SubMenu 5.5</a></li>
                <li><a href="#SubMenu 5.6">SubMenu 5.6</a></li>
                <li><a href="#SubMenu 5.7">SubMenu 5.7</a></li>
                <li><a href="#SubMenu 5.8">SubMenu 5.8</a></li>
                <li><a href="#SubMenu 5.9">SubMenu 5.9</a></li>
                <li><a href="#SubMenu 5.10">SubMenu 5.10</a></li>
                <li><a href="#SubMenu 5.11">SubMenu 5.11</a></li>
                <li><a href="#SubMenu 5.12">SubMenu 5.12</a></li>
            </ul>
        </li>
    </ul>
</nav>

And here is the associated CSS:

nav li {
    display:inline-block;
    padding:0 0.4em;
    height:1.4em; line-height:1.4em;
    position:relative;
}

nav li.sub:after { content:'\25ba'; float:right; vertical-align:middle; font-size:50% }

nav > ul > li     { cursor:default }
nav li ul         { display:none }
nav li li         { display:block; width:8em }
nav li:hover > ul { display:block; position:absolute; top:1.4em;    left:-1px; width:8em; z-index:10 }
nav li li:hover ul{ left:8em; top:-1px }

nav li       { color:black; background:#C2C2C2; border:1px solid #121314; }
nav li li    { color:black; background:#C2C2C2; border-color:#696 }
nav li li li { color:black; background:#C2C2C2; border-color:#669 }

nav li:hover       { background:#828282; color:#fee }
nav li li:hover    { background:#828282; color:#efe }
nav li li li:hover { background:#828282; color:#eef }

nav li li { border-top-width:0 }
nav li li:first-child { border-top-width:1px }

For a better understanding, please refer to this image: https://i.sstatic.net/k7j6E.jpg

Any assistance with achieving this navigation layout would be highly appreciated. Thank you!

htmlcssmenu

Answer №1

The issue arose from incorrectly assigning positions to certain elements (using relative positioning) and giving the li tags excessive sizes. Additionally, it was necessary to specify that the last li elements should be displayed as block, while the first ones should be displayed as inline-block.

nav > ul > li {
    display: block;
}

nav li li {
    display: inline-block;
}

http://jsfiddle.net/filipetedim/duagvm3h/9/

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

What is the process for outputting JSON data from a script page?

I had a JSON file named results.json which is displayed below. Additionally, I had an HTML file containing some script that is used to retrieve data from this JSON file. Upon entering the HTML page, a script function get_machFollow(que_script) is called to ...

javascriptjqueryhtmljson

Two-toned diagonal design featuring a lone character

I'm searching for a unique design featuring the letter "d" in two colors, arranged diagonally without any gradient effects. Here is the CSS code I am currently using: .gradient_text_class { font-size: 72px; background-image: linear-gradient(50de ...

htmlcss

Use jQuery to place the initial 3 elements within a div

Currently, I am dynamically pulling content into li elements using ASP.NET. My goal is to wrap a specific div class around the first 3 li items in the list only. Here is an example: <ul class="wrapper"> <div cl ...

jqueryhtmlasp.netcss

Difficulty arises when trying to merge a dropdown menu with a horizontally scrolling menu

I am attempting to include a dropdown menu within a horizontally long menu. In order to achieve this, I have merged the script for displaying a scrollable menu with that of a dropdown menu. However, in doing so, the dropdown menu does not pop out from the ...

jquerycssmenu

Which CSS properties can I implement to ensure that the text remains legible regardless of the background behind it?

Looking ahead, I am displaying an issue where the colors are almost perfect, but when different percentages are applied, some or all of the text becomes obscured. My goal is to assign the font color based on the background difference. I vaguely remember s ...

css

Refresh PHP Calculator Display Once Results are Shown

Currently working on a basic calculator project coded in HTML, CSS, JS, and PHP. Here is a glimpse of it: The user input retrieval is handled by JS, while the actual calculations and result display are taken care of by PHP. I am striving to clear out the ...

javascriptphpjqueryhtmlcss

Changing the color of placeholder text with CSS on Squarespace

I'm having a tough time figuring out how to adjust the color of the placeholder text in my form fields. Despite being able to change the background color of the form fields, I can't seem to alter the text color. The placeholder text doesn' ...

cssformssquarespace

Accelerate website loading

After testing the speed of my site's loading, I discovered that the reason for its slow speed is... Some proxy caching servers do not cache resources with a "?" in the URL. To address this issue, it is recommended to remove the query string and enc ...

htmlcssweb-development-server

php redirect back to the page upon form submission

I've designed an html form that allows users to input data, which will then be saved into a database using PHP: <form action="http://localhost/php/insert.php" method="post"> Barcode: <input type="text" name="barcode" /><br><b ...

phphtmlmysqlforms

Divs that are 30% of their parent's width will not align vertically and will not fit in a parent div that is 100% width

I am attempting to vertically center the three child-divs <div class="section"> as 3 rows in one column within <div class="container_page_2">. When I refer to vertical alignment, I mean having an equal distance between the top of the page and ...

htmlcss

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

javascriptjqueryhtml

What is the reason for the exclusion of the viewport meta tag from the standard guidelines?

Emphasizing the significance of incorporating the viewport meta tag, various sources stress its role in controlling layout on mobile browsers. According to information from MDN's article Using the viewport meta tag to control layout on mobile browsers ...

htmlviewportmeta-tags

Using JavaScript to display content on the page after handling a form

Hey there! I'm currently working on a website project where users can input their name and have it displayed on the page. My plan is to achieve this using JavaScript. HTML: <div id='errormsg'></div> <form action='' ...

javascripthtml

Series of responses cascading from one another

Users are experiencing an issue where the need for adjusting margins based on the depth of responses in posts. Currently, this involves setting a margin-left value of 40px for one level deep reactions and 80px for two levels deep, and so on. To address th ...

htmlcsswidthmargincenter

What should we name this particular style of navigation tab menu?

What is the name of this tab menu that includes options for next and previous buttons? Additionally, is there a material-ui component available for it? https://i.sstatic.net/0m9rH.png ...

javascriptcssreactjsmaterial-ui

How can I vertically align a photo or image on Facebook?

Can anyone explain how Facebook manages to vertically align its photos without using padding or margins? I've looked into their img tag and its parent, but neither seem to have any spacing properties. Although there is a vertical-align attribute prese ...

javascripthtmlcssfacebookvertical-alignment

Content towering over the footer

Can anyone help me figure out how to create a footer that appears behind the content when you scroll towards the end of a website? I've tried looking for tutorials online, but haven't found exactly what I'm looking for. Most of what I'v ...

jquerycsshtmlfooterslideup

How can I retrieve the selected value from an Angular 2 dropdown menu when it changes, in order to utilize it within a function?

I am currently working on creating a dropdown menu with multiple options. When a user selects an option, I need to make an API call that requires an ID parameter. Inside my component.ts file, I have defined an array containing the values like this: valu ...

javascripthtmlangulartypescript

Identify compatibility with the background-attachment property set to fixed

I've been searching for an updated answer on this topic, but I couldn't find one so I wanted to confirm. My goal is to achieve a parallax effect using background-attachment: fixed, however I've noticed that it doesn't work on mobile ph ...

javascripthtmlcss

Sidenav Content with all elements having opacity applied

How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code: function openNav( ...

javascripthtmlcsswordpress