Hover over the horizontal dropdown menu

I have attempted to create a horizontal drop down menu using this tutorial and demo

I envision the menu to look like this:

I want the sub-menu to appear to the right of the parent menu, as shown in this example

The next step involves the sub-menus. The goal is for each sub-menu to appear to the right of its parent menu item when hovered over.

li ul {
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
}

However, the sub-menu is currently not appearing to the right of its parent menu as intended:

here is the jsfiddle link

htmlcss

Answer №1

Update the current styling for your hidden ul list by applying the class subdrop-list

Next, include the following CSS code:

.subdrop-list {
    display: none;
    position: relative;
}
.subdrop-list ul {
    position: absolute;
    top: 0;
    right: 0;
}

See the example on JSFiddle : http://jsfiddle.net/4jVtw/3/

Answer №2

To ensure that a catalog item with a submenu displays correctly, it should have either a position of relative or absolute, allowing other elements to be positioned relative to its offset top.

Answer №4

Modify the CSS for .has_sub_sub ul to use margin-top: -41px; rather than top: 0

.sidebar #nav .has_sub ul .has_sub_sub ul {
    position: absolute;
    left: 231px;
    width: 230px;
    margin-top: -41px;
    display: none;
    background: #efefef url("http://responsivewebinc.com/premium/macadmin/img/cream.png") repeat;
}

JSFiddle Link

Answer №5

Check out this example: http://jsfiddle.net/4jVtw/5/

<!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>
<title>Horizontal Drop Down</title>

<script type="text/javascript" >
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
<style type="text/css">

body {
    font: 11px verdana;
}
ul {
    border-bottom: 1px solid #CCCCCC;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 150px;
}
ul li {
    position: relative;
}
li ul {
    display: none;
    left: 149px;
    position: absolute;
    top: 0;
}
ul li a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #CCCCCC #CCCCCC -moz-use-text-color;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    color: #777777;
    display: block;
    padding: 5px;
    text-decoration: none;
}
* html ul li {
    float: left;
    height: 1%;
}
* html ul li a {
    height: 1%;
}
li:hover ul, li.over ul {
    display: block;

}

</style>
</head>
<body> 
<ul id="nav"> 
  <li><a href="#">Dashboard</a></li> 

  <li><a href="#">Catalog</a> 
    <ul> 
      <li><a href="#">Attribute</a></li> 
      <li><a href="#">Attribute Group</a></li> 

    </ul> 
  </li> 

</ul> 
</body>
</html>

Answer №6

To achieve the desired spacing, opt for margin-top:35px; over top:0;

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

Mobile devices offer a seamless vertical scrolling experience

Here is the HTML structure I am working with: <div> <a>..</a> <i>..</i> <a>..</a> <i>..</i> <a>..</a> <i>..</i> </div> On larger screens, all elements are dis ...

htmlcsssass

How can I extract text from a website without retaining number, dot, and alphabet bullets in the list?

I am currently using Python 2.7.8 for a project involving a website with text displayed in an ordered list format using ol tags. I need to extract the specific text items listed below: Coffee Tea Milk This is an example of the HTML code used on my websit ...

pythonhtmlweb-scrapingbeautifulsoup

What could be causing the horizontal scroll bar to appear on the Web Page, even though it should fit perfectly on

I've designed this website to perfectly fit within the browser window, but for some reason, there's a horizontal scrollbar appearing. When a site fits properly, there shouldn't be a need for a horizontal scroll bar. I double-checked my zoom ...

htmlcssbootstrap-4

Enhance Your HTML Skills: Amplifying Table Display with Images

Recently, I utilized HTML to design a table. The Table Facts : In the first row, I included an appealing image. The second row contains several pieces of content. In continuation, I added a third row. The contents in this row are extensive, resulting i ...

javascriptjqueryhtml

The text/font-weight of the header button is mysteriously shifting without warning

While creating a header for my webpage, I encountered an issue where the text family was changing when the dropdown menu was launched in Safari 8. Curiously, this behavior did not occur when using Chrome to launch the jQuery function. Even after attempting ...

javascriptjqueryhtmlcssfonts

Expanding the Element prototype with TypeScript

Is there a corresponding TypeScript code to achieve the same functionality as the provided JavaScript snippet below? I am looking to extend the prototype of the HTML DOM element, but I'm struggling to write TypeScript code that accomplishes this with ...

javascripthtmlnode.jstypescriptprototype

Are there any plugins available that can create a Ken Burns effect using JQuery?

All I need is a straightforward plugin, not one for creating slideshows. In this case, I only have 1 div and 1 image. The goal is to have the image animate within the div, shifting left/right or up/down without any white space visible. The size of the ima ...

javascriptjquerycssimagetemplates

Is there a way to transform an HTML table from a horizontal layout to a vertical

I have reorganized the bus seating layout horizontally using a table. However, I now need to transform it vertically for mobile phones without disrupting my existing code. My attempt at using transform(rotate90deg) achieved the desired result, but the tab ...

htmlcssvue.jsbootstrap-5

IE11 React application cannot recognize the <main> tag

When using my React application, I encountered the following error message in the dev console while using IE11: Warning: The tag <main> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase let ...

reactjshtmlinternet-explorer-11

When a base html tag is dynamically added, the browser mistakenly loads assets twice

When managing relative paths on a website, I utilize the <base> tag within the <head> section of each page. Although all resources loaded via relative-like paths in the documents are displayed correctly, my observations show that browsers such ...

javascriptjqueryhtmloffline-browsing

The variable $_FILE fails to retrieve the file, resulting in PHP displaying an undefined variable error

I am facing an issue where I am unable to get the image file sent from an HTML form to insert it into a database. The other variables are being posted successfully, as I have checked them by echoing, but the image file is not getting posted. I suspect that ...

phphtml

-moz-box-reflect - Styling for FireFox

I've been attempting to achieve a similar effect to this tutorial at http://designshack.net/tutorialexamples/HoverEffects/Ex5.html. However, I'm encountering issues with getting the reflection of the image to display properly in IE and Firefox. H ...

htmlcssinternet-explorer

Divide HTML content while keeping inner tags intact

Currently, I am developing an online store. In my code, there is a requirement to display attributes and descriptions for multiple products on a single page. The attributes are displayed in a table format, while the description can include simple text as w ...

phphtmlsplithtml-encode

Designing Progress Bars with CSS3

I'm currently working on enhancing the appearance of the progress bars across my website, all of which are built using jQuery UI. My goal is to achieve a design similar to the one shown below (featuring a stylish bevel effect and a visually appealing ...

css

Floating division element above responsive divisions

element, I am in the process of developing a straightforward online card interface. In this interface, there will be a user profile picture displayed above some details about that user. However, to achieve this layout, the profile picture must appear hove ...

javascriptjqueryhtmlcsstwitter-bootstrap

Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Maintain text while transitioning to another page

On my webpage (refer to image for details), users need to select options through a series of steps. The process involves clicking on a link in the top box, then entering a search term in the searchbox to display relevant links in div1. Clicking on a link ...

javascriptjqueryhtmlajax

Is there a way to prevent the second ul from appearing?

Seeking assistance with navigation. When clicking on the "Athletics" tab in the provided link, the second ul displays. Is there a method to hide this second ul and have it only appear upon hovering? ...

htmlcss

Is there a way to make the first Image Element within the div automatically clickable?

Is there a way to set the first image in a div as the default clicked element? I have a div with multiple images and I want the first one to be clicked by default. This is part of a React functional component that serves as a view. <div className=&quo ...

javascripthtmlreactjsreact-hooks

The jQuery plugin embedded in the Joomla 3.2 module fails to load or function properly

Seeking help with a JavaScript issue on my Joomla website. I'm not an expert, so please bear with me. I am using a regular plugin (not a Joomla specific one) to display my portfolio. It should work like this: ... black.html This is how it shouldn&a ...

javascriptphpjqueryhtmljoomla