Adding a sub-menu to a dropdown menu in your Blogger website can enhance navigation and improve

Having some trouble adding a "sub menu" to my drop down menu. I have limited knowledge of CSS and can't seem to figure it out. My goal is to make the sub-menu open to the right side when the cursor is placed on it. Below is the related CSS and HTML code. Any help would be greatly appreciated.

CSS AND HTML

#menu{background:#f0f0f0;border:1px solid #ddd;color:#ddd;height:35px;font-family:'Oswald', Arial, sans-serif;width:1090px;margin:0 auto;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
// Rest of the CSS code here...

<nav id='menu'>
<input type='checkbox'/>
  // More HTML code here...

javascriptjqueryhtmlcsssubmenu

Answer №1

Consider using this CSS code to enhance your design:

#nav {
list-style:none inside;
margin:0;
padding:0;
text-align:center;
}

#nav li {
display:block;
position:relative;
float:left;
background: #006633; /* background color for menu */
}

#nav li a {
display:block;
padding:0;
text-decoration:none;
width:200px; /* width of menu items */
line-height:35px; /* height of menu items */
color:#ffffff; /* font color for list items */
}

#nav li li a {font-size:80%;} /* smaller font size for sub-menu items */

#nav li:hover {background:#003f20;} /* highlight current item and parent items when hovering over submenus */

#nav ul {
position:absolute;
padding:0;
left:0;
display:none; /* hides sublists */
}

#nav li:hover ul ul {display:none;} /* hides sub-sublists */

#nav li:hover ul {display:block;} /* shows sublist on hover */

#nav li li:hover ul {
display:block; /* show sub-sublist on hover */
margin-left:200px; /* adjust width to match parent item */
margin-top:-35px; /* align top of submenu with top of list item */
}

View the fiddle example here -> http://jsfiddle.net/oqww08s4/2/

If you prefer an alternative approach, you can also check out this fiddle -> http://jsfiddle.net/6kDG8/2/

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

Efficiently convert Map keys into a Set in Javascript without the need to copy and rebuild the set

Even though I am capable of const set = new Set(map.keys()) I don't want to have to rebuild the set. Additionally, I prefer not to create a duplicate set for the return value. The function responsible for returning this set should also have the abili ...

javascripttypescript

Oops! We encountered an internal server error while trying to resolve the import for "@vue/server-renderer"

Several months ago, I created a Vue 3 project using Vite and everything was running smoothly. However, today when I tried to make a small modification, an error occurred at runtime. All Vue files are showing the same error message: [vite] Internal server ...

javascriptvue.jsvite

Struggled to Find a Solution for Code Alignment

Is there a tool or software that can align different types of codes with just one click? I've tried using the Code alignment plugin in Notepad++, but it hasn't been effective. For example, when aligning HTML code using tags, I couldn't find ...

javascriptphphtmlcss

Decoding json data with targeted API keys

Looking for some assistance here. I've got a JSON data set that looks like this: [ { "positive": 2, "negative": 4 }, { "positive": 9, "negative": 18 }, { "positive": 6, "negative": 12 } ...

javascriptvue.js

Is there a way for me to align my numbers in a vertical column?

Here is the table I am working with: table td { width: 200px; text-align: center; } .red { border:1px solid red; } <table> <thead> <tr> <th>Price</th> </tr> </thead> & ...

htmlcss

Is it possible to display a combination of images and text data using JQUERY/AJAX, when the data is sent as objects or arrays?

I'm struggling to figure out how to handle an object or array sent from a server that contains binary picture and text data using JQUERY/AJAX Here is the server-side setup: const url= require('url'), express = require('express&ap ...

javascriptjqueryajaxexpress

implementing a JavaScript function and declaring a variable from an HTML source

On my webpage, I have a feature that gathers a large amount of data using jQuery. My goal is to limit the number of results displayed by changing the shown results dynamically to create a false-page effect. This functionality is all handled through a singl ...

javascriptjqueryhtml

Unlimited digest loop in Angular.js caused by nested ng-repeat and filter

In my AngularJS project, I have developed a custom filter that categorizes elements by type and performs a search for multiple search terms across all attributes of devices. angular.module('abc').filter('searchFor', function(){ return ...

javascriptangularjsangularjs-ng-repeat

Using Ajax to update a MySQL database with an array from jQuery

I need some assistance in updating a MySQL table using data from a jQuery array through AJAX. I've tried searching for similar issues without any luck, possibly due to my lack of familiarity with the correct terms in web development and coding. Allow ...

javascriptphpjquerymysqlajax

Displaying a Jquery slider by clicking on links

I am interested in setting up a slider for two different forms. Specifically, I plan to have one form labeled Form 1 and another labeled Form 2 displayed as text. When users click on Form 1, a table containing the form will slide out from underneath the ...

javascriptjquery

Tips on changing an image with a button click

I am currently working on a project where I have a div tag containing an image that is selected randomly from different arrays based on topics. However, I am facing some challenges in making the image change when the "go" button is clicked. I want the if ...

javascripthtml

Tips for maintaining checkbox checked status through page reloads

Hello there! In my Laravel e-commerce store, I have a list of currency values displayed as checkboxes. When a checkbox is selected, the page reloads to update the currency value. However, the checkbox selection is lost after the page reloads. Any suggest ...

phpjqueryajaxlaravel-4

Tips for reconnecting tinymce to a textarea following an ajax refresh

Whenever I submit a form with a tinymce textarea, the containing div gets reloaded using the following code: $('body').on('submit', '.comment_form', function (e) { e.preventDefault(); tinyMCE.triggerSave(); ...

jqueryajaxtinymcereload

Angular not refreshing the view

As a beginner in Angular.js, I feel like I might have missed something small but significant here. To enhance my understanding of Angular, I am constructing a simple panel to route video sources to various destinations. I currently have a list of predefi ...

javascriptangularjs

Transform a text string into JSON format using Javascript

I need help converting a text string to JSON format using JavaScript. The text string is as follows: workingtable;AB8C;book_id;7541; I want to convert it into JSON format like this: {"workingtable":"AB8C","book_id":"7541"} Is there a specific JSON funct ...

javascriptjsonstringtextformat

Access the SSH connection by loading PUTTY from within an HTML document

Recently, I was tasked with creating a webpage that includes various links which, upon clicking, will trigger the opening of putty and establish an SSH connection. This is a new challenge for me, so I am reaching out for any assistance or guidance on how ...

htmlsshxhtmlputty

Uniform dimensions for HTML tables

When creating an HTML document with consecutive tables that need to be formatted the same way, it can be challenging. Browsers will often render columns of one table wider than another simply due to content width. The typical solution is to hard-code colu ...

csshtmlhtml-table

Storing data in the browser's local storage using jQuery without requiring any CSS

I have a form that receives data and I am trying to save the first two pages of received data into localStorage: <form id="myForm" method="post"> Font Size (px): <input id="fontsize" type="text" name="fontsize" /> </form> <s ...

javascriptjquerycsshtml

What is the reason for the || operator failing to function properly in JavaScript?

In my Node.js and Express pagination setup, I encountered an issue where if the slug <= 0, it would not default to 1. new(req, res, next) { let perPage = 16; //let page = req.params.page <= 0 ? 1: req.params.page; //This works ...

javascriptnode.jsexpress

Tailwind's implementation of CSS Grid allows for the creation of a grid structure where specific cells can be selectively populated

I am currently using Tailwindcss with my Next.js application to showcase multiple images retrieved from a Supabase database in a grid layout. However, I am facing a problem where the images are being displayed in rows instead of columns within the grid whe ...

cssnext.jsgridtailwind-csscss-grid