Create a horizontal menu that includes a submenu, all bordered with a cohesive design that is compatible with Internet Explorer

I am facing some issues with a horizontal menu. To better illustrate my problem, here is an example of the desired outcome example.

  1. The submenu should align left with its parent, but when I add #nav li{position:relative;}, it ignores the left floating and the submenu's parent border from the main menu, which I cannot remove.

  2. The menu needs to have a horizontal submenu without a background, but with a border shared with the parent. Both the menu and submenu should be liquid in width.

  3. Additionally, the challenge is to make this work in IE7.

ul#nav {
  list-style: none;
  padding: 0;
  position: relative;
  display: block;
}

#nav li {
  float: left;
  padding: 6px 10px;
}

#nav li:hover {
  padding: 5px 9px;
  border: 1px solid #000000;
}

#nav li a {
  text-decoration: none;
  color: #09F;
}

#nav li:hover a {
  color: #000000;
}

#nav .submenu li a {
  color: #3F0;
}

#nav li .submenu {
  position: absolute;
  left: -9000px;
}

#nav li:hover .submenu {
  margin-top: 5px;
  left: -1px;
  border: 1px solid #000000;
}

.submenu ul {
  list-style: none;
  padding: 0;
  float: left;
}

body {
  /* added to show transparency */
  padding: 20px;
  background-color: #6d695c;
  background-image: repeating-linear-gradient(-30deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(30deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px), linear-gradient(30deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1)), linear-gradient(-30deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1));
  background-size: 70px 120px;
}
<ul id="nav">
  <li><a href="#">Primu</a></li>
  <li><a href="#">Adoilea</a>
    <div class="submenu">
      <ul>
        <li><a href="#">submenu1</a></li>
        <li><a href="#">sub2</a></li>
        <li><a href="#">subtrei</a></li>
        <li><a href="#">subpatru</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#">trei</a></li>
  <li><a href="#">patru</a></li>
  <li><a href="#">cinci</a></li>
</ul>

javascripthtmlcssinternet-explorer-7

Answer №1

Below are the modifications I made to the CSS and HTML code:

.submenu {
visibility: hidden;
position: absolute;
list-style:none;
padding: 0;
display: block;
}

.submenu li{float: left; list-style: none;}

.submenu li ul{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
background: #ddddef;
}
.submenu li{float: none; display: inline;}

#nav li:hover div{
position: relative;
width: 1000%;
overflow: visible;
}

#nav li:hover div .submenu{
margin-top: 5px;
left: -10px;
border: 1px solid #000000;
visibility: visible;
overflow: visible;
}

In the HTML, I added a class to ul and removed it from div.

      <ul id="nav">
        <li><a href="#">Primu</a></li>
        <li>
        <a href="#">Adoilea</a>
        <div>
             <ul class="submenu">
                    <li><a href="#">submenu1</a></li>
                    <li><a href="#">sub2</a></li>
                    <li><a href="#">subtrei</a></li>
                    <li><a href="#">subpatru</a></li>
              </ul>
        </div>

        </li>
        <li><a href="#">trei</a></li>
        <li><a href="#">patru</a></li>
        <li><a href="#">cinci</a></li>
</ul>

I have tested this in IE8 and FF; unfortunately, I don't have access to IE7 for testing purposes. The submenu now aligns to the left of the parent item. However, removing the border-bottom from the parent might require JavaScript.

UPDATE: This version combines CSS with jQuery. One issue is that items with submenus have a larger margin on the right (to match the width of the first submenu item). This may need further adjustment for better alignment.

The HTML remains the same as above. jQuery:

$(document).ready(function(){
$('.firstitem').parent().parent().parent().width($('.firstitem').width()).find('a').css("margin", "0px auto").css("text-align", "center");

$('#nav li').hover(
function(){

if ($(this).find('ul').hasClass('submenu')){
$(this).css("border"," 1px solid #000000");
$(this).css("border-bottom"," 1px solid #6d695c");
//$(this).width($(this).find('.firstitem').width() + 1);
 }
     }, 
function (){
if ($(this).find('ul').hasClass('submenu')){
$(this).css("border","1px solid #6d695c");
 }
 });


  });

Revised CSS styles:

#nav {
    list-style:none;
    padding: 0;
    position: relative;
    display: block;
}
#nav li {
    float: left;
    padding: 6px 10px;
    background-color: #6d695c;
}
#nav li:hover {
    border: 1px solid #000000;
}
#nav li a {
    text-decoration: none;
    color: #09F;
}
#nav li:hover a {
    color: #000000;
}
#nav .submenu li a {
    color: #3F0;
}
.submenu {
visibility: hidden;
position: absolute;
list-style:none;
padding: 0;
display: block;
}

.submenu li{float: left; list-style: none; padding: 0; margin: 0;}

.submenu ul{
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
background: #ddddef;
}
.submenu li{float: none; display: inline;}

#nav li:hover div{
position: relative;
width: 1000%;
overflow: visible;
}

#nav li:hover div .submenu{
    margin-top: 5px;
    padding: 0;
    left: -11px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-top: 0px;
    visibility: visible;
    overflow: visible;
}

#nav li:hover div .submenu > li{
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

#nav li:hover div .submenu > li.firstitem{
    border-top: 1px solid #6d695c;
    border-bottom: 1px solid #000000;
}
#nav li:hover div .submenu li:hover{
border: 2px solid #000000;
}

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

The transparent sticky navigation bar isn't functioning as intended

I stumbled upon a code for the sticky navbar that I found on this website. Intrigued, I decided to copy the code and test it out on my Laravel blade file. The output turned out like this: https://i.sstatic.net/lexRl.jpg Here is how I copied the code: CS ...

htmlcssbootstrap-4

In order to ensure proper alignment, adjust the width of the select element to match the width of the

Is there a way for the select element to adjust its width based on the length of the selected option? I want the default option value's width to be shorter, but once another option is selected, I'd like the select element to resize itself so that ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3html-select

The server received a JSON object as null when using the ajax POST method

I've been looking around but can't find a solution to my problem. I'm using ajax to send a stringified array filled with objects to a php script that just returns it. However, during transmission, the object becomes NULL. Am I sending the JS ...

javascriptphpjsonajaxpost

The reason why JavaScript condenses two or more spaces into just one space

After encountering a problem with my HTML/JS/Angular script, I created a simple demo to illustrate the issue. Although I have found a solution, I still wanted to seek advice from experts. <body ng-app> <div ng-controller='abc'> ...

javascriptangularjs

Tips on how to maintain the underline when text is split into two sections

Revised This question is distinct from the duplicate one. I am specifically addressing the issue of ensuring the underline continues until the end of the text, regardless of how many lines it spans. The challenge I am facing is with displaying the underl ...

htmlcssunderline

Establish a connection to an already existing database using Mongoose

I've been exploring the inner workings of MongoDB lately. After setting up a local database, I created a collection with the following document: db.user.find().pretty() { "_id" : ObjectId("5a05844833a9b3552ce5cfec"), " ...

javascriptnode.jsmongodbexpress

Tips for combining two htmlelements together

I have two HTML table classes that I refer to as htmlelement and I would like to combine them. This is similar to the following code snippet: var first = document.getElementsByClassName("firstclass") as HTMLCollectionOf<HTMLElement>; var se ...

javascripthtmldom

Checking and locating elements using Jquery's distinctive style

Within my code, I am searching for the DIV element that has the class .se and also has the attribute display: block. Once found, I need to retrieve the ID of this particular DIV. Unfortunately, it seems like my current approach is not correct. var usedse ...

jquerycssattr

1. "Customizing Navbar height and implementing hover color for links"2. "Tips for

Having issues adjusting the height of my Navbar - when I try to do so, the collapse button doesn't function properly. I've attempted setting the height using style="height: 60px;" and .navbar {height: 60px;} but the collapse menu stops ...

htmlcss

How to keep your vue-router up-to-date

As a newcomer to vuejs, I am using vue cli 3 for my project which consists of various components. One of the components is a menu component where I retrieve all the menu items from an API (code provided below). I have integrated vue-router for routing purp ...

javascriptvue.jsvue-componentvue-router

Resolving Problems with Ion-Split-pane in the Latest Versions of Angular and Ionic

There seems to be a perplexing issue with the ion-split-pane element that I just can't wrap my head around. Once I remove the split-pane element, the router-outlet functions perfectly fine. The navigation is displayed after a successful login. The on ...

cssangulartypescriptionic-frameworkmobile

PHP encountered an issue while trying to compare the value stored in the $_POST variable with the value stored in a

In my current project, I have utilized a JSON file to store data and PHP to retrieve and display it. However, I am facing an issue when comparing values from $_POST - specifically, if the value contains spaces, the comparison fails. Here is the problematic ...

phphtmljsonformspost

JavaScript tile mapping not rendering

<html> <head> <title>TileMap</title> <style> #canvas { outline: 1px solid #000; } </style> </head> <body> <canvas id="canvas" height="1000" width="1000"></canvas> <scr ...

javascripthtml

Executing JavaScript Function on the Server Side

Recently, I created a JavaScript function that looks like this: function ShowMsg(msg) { $.blockUI({ message: '<div dir=rtl align=center><h1><p>' + msg + '</p></h1></div>', css: { ...

javascriptasp.netserverside-javascript

Creating a custom request for the Upload component in Ant Design Vue requires a specific set of steps and

I attempted to implement the solution provided in How should customRequest be set in the Ant Design Upload component to work with an XMLHttpRequest? but it doesn't seem to be working for me in Ant Design Vue. Could someone provide an example, please? ...

javascriptvue.jsantd

Turn off the feature that prohibits the use of variables before they are

I'm struggling to disable this setting in my tsconfig file. The TS documentation doesn't seem to have any information about how to do it. no-use-before-declare I'm facing an issue where my test stub data objects are interfering with each ot ...

javascripttypescript

Retrieving an assortment of objects from a database and showcasing them using React

Attempting to retrieve an array of objects led me to this issue. Please excuse the messy code, I am still learning. export class App extends Component { state ={ character:[] } componentDidMount(){ fetch('https://swapi.dev/api/people/ ...

javascriptreactjsfetch

capturing the selected value from a dropdown menu upon form submission

Take a look at this HTML form: <form id="form1"> <select name="date" class="form-control"> </select> <input type="submit" name="submit" id="submit" value="Save" onclick="SubmitForm('#form1', 'editcustomer_callu ...

html

Setting up event listeners from a string array (using PIXI.js)

Hey there! I've encountered a bit of an interesting challenge that could easily be resolved by duplicating the code, but where's the fun in that? This project is more of an experiment for me, just to prove that I can do it. However, the idea has ...

javascripttypescriptcallbackpixi.js

Showing an image on a blurred background-image at the top of the webpage

Is it possible to overlay an image on top of another image, with the top image appearing blurred in the background? .background-image { background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&a ...

htmlcss