Menu selection without javascript

Recently, I encountered an issue with a menu containing tabs. When hovering over a tab, a list of items appears at the bottom of the tab. However, I decided that I wanted this list to transition downwards instead of simply appearing (previously set as display:block). The challenge arose when I realized that when the transition starts, the top of the list should be positioned based on a specific calculation (width of a tab multiplied by the number of tabs). Surprisingly, I hope to achieve this without using any JavaScript.

Does anyone know of a solution to address this situation?

htmlcssmenu

Answer №1

Here is a CSS dropdown menu example that I have created:

Using HTML and CSS:

#menu, #menu ul
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0 0 26px 0;
margin: 0;
}
#menu li
{
float: left;
margin-right: 3px;
border: 1px solid #ecffec;
position: relative;
}
#menu ul
{
position: absolute;
top: 25px;
left: -1px;
width: 200px;
padding: 0;
display: none;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
line-height: 15px;
}
#menu a:link, #menu a:visited
{
display: block;
font-family: Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
}
#menu li:hover
{
background-color: #ffd98a;
border: 1px solid #000;
}
#menu li:hover ul
{
display: block;
}
<ul id="menu">
  <li><a href="#">Programming Language</a>
    <ul>
      <li><a href="#">Java</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">Asp Classic</a></li>
      <li><a href="#">ASP.NET</a></li>
      <li><a href="#">javascript</a></li>
      <li><a href="#">Perl</a></li>
    </ul>
  </li>
  <li><a href="#">Database</a>
    <ul>
      <li><a href="#">SQL Server 2005</a></li>
      <li><a href="#">Oracle</a></li>
      <li><a href="#">MySQL</a></li>
      <li><a href="#">DB2</a></li>
    </ul>
  </li>
   <li><a href="#">Help</a></li>
</ul>

Answer №2

Did you take a look at this awesome CodePen?

html part

<h2>Checkbox style</h2>

<div class="dropdown">
  <input type="checkbox" id="my-dropdown" value="" name="my-checkbox">
  <label for="my-dropdown"
     data-toggle="dropdown">
  Make a selection
  </label>
  <ul>
    <li><a href="#">Coffee</a></li>
    <li><a href="#">Coverage</a></li>
    <li><a href="https://twitter.com/hashtag/covfefe">Covfefe</a></li>
  </ul>
 </div>


<h2>Link style</h2>

 <div class="dropdown">
  <ul id="my-dropdown2">
    <li><a href="#">Coffee</a></li>
    <li><a href="#">Coverage</a></li>
    <li><a href="https://twitter.com/hashtag/covfefe">Covfefe</a></li>
 </ul>
  <a href="#my-dropdown2"
    aria-controls="my-dropdown2"
    role="button"
    data-toggle="dropdown"
    id="my-dropdown2-btn">
  Make a choice
  </a>
     <a href="#my-dropdown2-btn"
     aria-controls="my-dropdown2"
    role="button"
     data-toggle="dropdown"
     class="close">
  Close dropdown
  </a>
 </div>

css part

I highly recommend checking out the link above - you won't be disappointed!

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 getImageData function is returning undefined RGB values

I am trying to create a feature where by clicking on an image, I can retrieve the RGB values of that specific pixel. Below is the code snippet I have implemented: <html> <body> <canvas id="kartina" width="500" height="500"></canvas&g ...

javascripthtmlcanvasgetimagedata

Having Trouble Operating Virtual Tour in Flash

I recently used a third-party software to create a virtual tour for my client's website. The virtual tour works perfectly fine on its own, as you can see here: However, when I tried to include the virtual_tour.html page on the index page of the websi ...

htmlxmlflashactionscript

Adjust the Font Size of Bootstrap 3 across different breakpoints

I am currently using Bootstrap 3 and I have a requirement to adjust the font-size at different breakpoints across my website. My goal is to easily modify the font size in one place and have it automatically apply to all Bootstrap components. The desired b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

When placed within a <li> element, the <a> tag will not create a hyperlink to a page, but it will

I have encountered an issue with my anchor links. All of them are working properly except for the one in the second ul with an href="page1". Interestingly, the link shows the correct destination at the bottom left of my screen and works when I right-click ...

htmlcss

HTML5 input placeholder adapts its size and position dynamically as data is being

During my interaction with the input fields on my bank's website, I noticed that the placeholder text undergoes a unique transformation. It shrinks in size and moves to the upper-left corner of the input field while I am entering information. Unlike t ...

javascriptjquerycsshtml

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

jqueryhtmlcss

Determining the orientation of an image in JavaScript

Currently, I am attempting to determine the orientation of images using JavaScript in order to apply a specific class to them. This process seems to be functioning correctly on Firefox, but is presenting challenges on other browsers. It appears to work bet ...

javascriptjqueryhtmlcssbrowser

Modify the pseudo element when a different class is active

I've encountered an issue while attempting to modify the after pseudo element when the .active class is applied. Despite my efforts, it doesn't seem to be functioning as intended. My current project setup involves using scss with Vue. I have tri ...

css

"Is an Ionic Top Navigation Bar the best choice for your

Creating an Ionic Top Navigation Bar Greetings! I am facing some challenges while trying to implement a Top Navigation Bar in my Ionic Project. Despite the lack of documentation on this specific topic, I am struggling to make it work properly. Your as ...

htmlcssionic-framework

separating kids with selectors

What is the recommended method for adding borders between children of various elements within a div? In the example below, there should be borders between p,div and div,img. <div id="list"> <p>child 1</p> <div>child 2</ ...

csscss-selectors

Right-align each item when selecting none

Is there a way to change the style of just one of the elements select or option, without affecting the style of both? I attempted to align the select element to the right, while leaving the option elements aligned to the left. However, this did not work a ...

javascriptjqueryhtmlcss

Tips for creating responsive designs with specific media queries for various device sizes

I am looking to create a responsive website using media queries and have already created different media queries for mobile, tablets, and desktops. However, I am unsure if I should be writing the same CSS code multiple times for various device sizes, such ...

htmlcssmedia-queries

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

Modify the anchor text when a malfunction occurs upon clicking

Whenever I click on the link, I am able to retrieve the correct id, but the status changes for all posts instead of just the selected item. Below is the HTML code: <div th:each="p : ${posts}"> <div id="para"> <a style="float: right;" href= ...

javajavascriptjqueryhtmlajax

Ways to interact with elements lacking an identifier

Currently, I'm faced with an HTML challenge where I need to interact with an element labeled tasks. *<td class="class_popup2_menuitem_caption" unselectable="on" nowrap="">Tasks</td>* In my attempt to do so, I've implemented the foll ...

pythonhtmlselenium

Chrome's XPath attribute selection is not functioning properly

After running a small test with expect.js, here are the results: describe('xpath', function () { it('locates attribute nodes', function () { $(document.body).append('<string fooBar="bar"><data id="xyz">< ...

javascriptgoogle-chromexpathhtml

Applying a Webkit Scroll Bar to a specific element on the webpage

I've been attempting to apply the Scroll Bar webkit styling to a particular element but haven't had any success. Despite searching extensively, I have come across 2 threads on Stack Overflow that do not provide a solution. Most of the available ...

htmlcsswebkit

Encountered an unexpected "<" error while using Ajax with MySQL

I am trying to accomplish a simple task - retrieve a table from a MySQL database. Previously, I was using basic MySQL code and it was working fine. However, after switching to MySQLi, I encountered an error: Uncaught SyntaxError: Unexpected token < ...

phphtmlmysqlajaxmysqli

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Is it feasible to divide a list into two columns using pure CSS if there are more than 5 child <li> elements? In the scenario I have in mind, this is the desired outcome: <li>1</li> <li>2</li> <li>3</li> ...

csssass

The accuracy of IE9 <section> is not quite up to par

When viewing This Page in IE9, the element section#tcs-website-content appears as 990px wide even though its CSS property is set to width: 100%. This occurs despite all parent elements also having a width of 100%, resulting in a browser width of 1024px. A ...

csshtmlinternet-explorer-9width