Menu disappears below the screen

I am experiencing an issue with my dropdown menu. I am having trouble figuring out how to adjust the position of the dropdown that appears when hovering over the "support" button. I would like to move it slightly to the left as half of it is extending off the screen and not visible.

Here is the link to view the issue:

[jsfiddle] http://jsfiddle.net/3ZzVT/1/

Any help or suggestions on how to fix this problem are greatly appreciated!

Answer №2

To achieve this, you can apply position:relative; and right:0; to the selector .head_menu ul.

Check out the DEMO here

Cascading Style Sheets (CSS)

.head_menu ul
{
    padding:0px;
    margin:0;
    list-style:none;
    position:relative;
    right:0;    

}

Answer №3

.header_nav ul li ul
{
    visibility: hidden;
    width: auto;
    position:absolute;
    top:30px;
    padding:0px;
    margin:0px;
    right: -15px; // New addition
}

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

Look into HTML and JavaScript problems specific to IOS devices

I have encountered some HTML markup and JavaScript functionality issues on my web-app that seem to only occur on iPad and iPhone. Unfortunately, I do not have access to any iOS devices to debug these problems. How can I replicate and troubleshoot these i ...

How to dynamically reduce the number of columns in a textarea using jQuery according to its content

Does anyone know how to make a textarea shrinkwrap the text inside on blur? The default number of columns is 10 or 15 and I want the textarea to adjust its width based on the text content. I have tried the following code: $('textarea').on(&apos ...

Positioning the div in the center

Having trouble centering a div inside a 100% wide container. Here is the HTML code: <div id="body-outside"> <div id="body-inside"> content </div> </div> And here is the CSS: #body-outside{ width:100%; flo ...

Applying CSS to select a different element style within a webpage

I was thinking about the possibility of linking one style to another using events like :focus or :hover in CSS alone, without the need for JavaScript. For instance, can the class "hitArea" change the background attribute of "changeArea" when it is in foc ...

What is the best way to replicate the orange outline when focused?

I am in the process of creating a series of divs that can be navigated by the user using the tab key. I would like to incorporate the standard orange focus outline for these elements. Is there anyone who can provide guidance on how to achieve this? I unde ...

Loss of styling is observed with jQuery's html() function

Here is the HTML code I am working with: <div class="myList"> <select> <option value="1">Item1</option> <option value="2">Item2</option> </select> </div> Everything looks great in terms of CS ...

Attach [!hidden] to a dropdown menu choice using Angular 2

How can I implement a show/hide feature for a select box in Angular 2+? Here's what I have so far: <select> <option disabled selected>Flow progress</option> <option *ngFor='let flow of flows'>{{flow}}< ...

Having trouble loading the image source using JSON in Vue.js

var topArticle=new Vue({ el:'#toparticle', data:{topmostArticle:null}, created: function(){ fetch('topnews.json') .then(r=>r.json()) .then(res=>{this.topmostArticle=$.grep(res,functi ...

The CSS3 Animation remains stationary

I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML: <div id="game"> <div id="block">&l ...

Fading text that gradually vanishes depending on the viewport width... with ellipses!

I currently have a two-item unordered list positioned absolutely to the top right of the viewport. <header id="top-bar"> <ul> <li> <a href="#">David Bowie</a> </li> <li> ...

Selenium is unable to activate the button element by clicking

I have been using Selenium with Python and attempting to click a button, but it simply isn't working. Here is the relevant HTML: <div class="nmMym"> <button class="sqdOP yWX7d _8A5w5 " type="button"> ...

What is the process for showcasing specific data using Vue.js?

{ "status": "ok", "source": "n", "sortBy": "top", "articles": [ { "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { ...

Guide on utilizing the History API or history.js to dynamically update the "active" link based on page refreshes and back button presses

Highlighted active links using JS on my website. <script type="text/javascript> $(document).ready(function(){ $("a.nav1").click(function() { $(".active").removeClass("active"); $(this).addClass("active"); ...

Alpha 4.0.3 Bootstrap Carousel with Shadow

Hello there, I've been tinkering with the bootstrap website and I'm looking to add an inset shadow effect to the carousel. Here's a snippet of the HTML: <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"& ...

Tips for generating cascading dropdown lists with AJAX

After using the code below, I encountered an issue with storing the value of the second dropdownlist in the database when clicking on the update button. An error occurred referring to a null value. In the form.aspx.cs file, I attempted to retrieve the valu ...

Initiate an Ajax request solely for the elements currently visible on the screen

I am currently facing an issue that requires a solution. Within our template, there are multiple divs generated with the same classes. Each div contains a hidden input field with the ID of the linked target site. My task is to utilize this ID to make aja ...

What is the best way to present information retrieved from a database using ASP.NET and HTML?

I have written a query to fetch a list of items from a database: CREATE PROCEDURE dbo.GetSubjects(@DayComing varchar(10) , @UserId varchar(3)) AS IF EXISTS( SELECT Std_ID FROM Student WHERE Std_ID = @UserID) BEG ...

The CSS code is functioning properly when implemented in a browser, but is not displaying correctly when added to the

When using the dev tools, we can easily apply border-radius: 20px; to .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .i ...

My stored variable in the php session is not being recalled properly

Currently, my PHP script is generating new files based on user input. I want all documents to be created using the initial input to ensure consistency. In the first PHP script, I set the variable as follows: session_start(); $_SESSION["FirstName"] = $_POS ...

Comparing Canvas and CSS3 for Website Development

Many discussions focus on comparing games with high levels of interaction, but my project involves a web application that manipulates objects individually. These objects can be images or text, and they can be replaced, resized, rotated, zoomed in, and dele ...