Take note that the li with child ul is set to display:inline - example code provided below
<style type="text/css">
ul.nav_main li { display: inline }
ul.nav_submenu li { display: block }
</style>
<ul class="nav_main">
<li>Item 1
<ul class="nav_submenu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
Although CSS does not impact the validity of HTML source code, it can lead to unexpected outcomes when browsers attempt to fit a UL element inside an inline element (even if technically valid!)
Feel free to verify it yourself
When it comes to XHTML 1.0, everything seems to be in order. To confirm this, you can utilize the W3C Validator tool: http://validator.w3.org/check
For testing purposes, a dummy page is required:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="all">
ul.nav_main li { display: inline }
</style>
</head>
<body>
<ul class="nav_main">
<li>Item 1
<ul class="nav_submenu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
</ul>
</body>
</html>
No issues found on the W3C Validator.
In CSS, it is permissible to nest <ul> elements.
To achieve a horizontal main navigation (nav-main) with vertical sub-menu navigation (nav_submenu), you need to apply display: inline-block to ul.nav-main > li.
<style>
ul.nav_main li { display: inline-block }
ul.nav_submenu li { display: block }
</style>
<ul class="nav_main">
<li>Item 1
<ul class="nav_submenu">
<li>Option 1.1</li>
<li>Option 1.2</li>
</ul>
</li>
<li>Item 2
<ul class="nav_submenu">
<li>Option 2.1</li>
<li>Option 2.2</li>
</ul>
</li>
</ul>
This code has been tested in Firefox 11 and Chrome 17 on Linux.
I'm struggling to display data from an array and I could use some help. Here's a snippet from my service.js file: this.fetchData = function() { var myArray = $resource('url', {method: 'get', isArray: true}); myArray ...
Here is an example of the HTML code for a table: <tbody> <tr>..</tr> <tr> <td class="tbl_black_n_1">1</td> <td class="tbl_black_n_1" nowrap="" align="center">23/07/14 08:10</td> <td ...
Is there a way to display a title on a slider when one of the slides contains a video? Here is an example code snippet: <!-- Swiper--> <div data-height="100vh" data-min-height="480px" data-slide-effect="fade" class="swiper-container swiper-s ...
Currently working on developing an app using Cordova/Phonegap (v6.5.0). Platforms where I've installed the app: - IOS (issue identified) - Android (issue identified) - Browser (no issue found) I am facing a known problem without a suitabl ...
I am envisioning a horizontal bar with items that are all the same width and evenly spaced apart. They can expand vertically as needed. Check out the updated version here on StackBlitz https://i.sstatic.net/MFfXd.png Issue: I am struggling to automatica ...
When working with two forms, one for user input and the other as a pop-up window to display results, users sometimes close the pop-up window prematurely if they think there is a network issue causing a delay in data execution. To prevent this, I am consi ...
I have been searching the internet for a solution to my issue but nothing seems to be working. Here is the problem: Unfortunately, I cannot modify the TR TD structure and am unable to use DIVs. I am trying to dynamically display certain TD elements based ...
I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...
I am currently developing an interactive map using the Google Maps API. The map includes a floating panel with two input fields where I can enter GPS coordinates. My goal is to create markers and connect them to form a polygon. While I can easily draw lin ...
Although CSS position properties may seem simple at first, when building a layout, tons of weird edge cases can come out of nowhere. One thing that I always overlooked was using height: auto or width: auto. To gain a better understanding, I stumbled upon ...
Currently, I have knowledge of javascript and I am currently expanding my skills in ASP.NET C#. My goal is to achieve the following task using javascript: document.getElementById('divID-1').innerHTML= '<p>Wrong Password< ...
My navigation header includes links to various websites, some of which are displayed as drop-down menus. I have implemented an animation and style change on hover to visually indicate the active link and display all available options in case of a dropdown ...
When attempting to crawl a website [URL: https://www.khaasfood.com/shop/], my first task is to retrieve the categories with their hierarchy. The .container element contains a list of li tags representing parent categories. Each parent category may also h ...
Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...
Encountered an issue in Chrome where the position:fixed property does not behave as expected. While this code works fine in Firefox and Safari, it seems to have a glitch in Chrome (69.0.3497.100). When scrolling, the blue div moves and reveals the green ba ...
Working on scraping data from multiple years which are represented by different webpages. I have successfully extracted the 2019 data as expected, but encountering an error while attempting to preprocess the 2016 data in a similar manner. url19 <- &apos ...
After implementing TweenMax from Gsap, I created a landing page intro with a loading container containing three divs, each with a h5 element positioned in the center using absolute positioning. Initially, I used StaggerFrom {opacity 0} to staggerTo {opacit ...
In my custom styling setup, I have created a custom color class called text-green (colors) and a custom typography class called text-card-highlight (utilities), which includes font size and weight attributes. However, when using tailwind-merge, only one of ...
I am currently working on creating a "reference document" section within a Webhelp Responsive website that I have developed using a DITA map. My goal is to display a typical document list with unique reference numbers ([1], [2], [3]...[N]) followed by rele ...
As part of a student exercise, I am attempting to access an API containing information about presidents and style them using CSS. However, I am facing issues with linking the style.css file. I have tried various methods to change the path and public path ...