Tips for creating a fixed top drop-down menu using CSS

Looking to create a dropdown menu similar to the one found on , using only CSS without jQuery, specifically for the "All" category menu. I have attempted a CSS dropdown menu but struggling to keep the second level menu fixed at the top. Any suggestions would be greatly appreciated.

Answer №1

It seems like there may be some confusion in your question, however, I have created a CSS-only menu that functions similarly to the one on the site you referenced. You can view it here.

Below is the HTML code:

<ul class="main">
    <li>all
        <ul class="sub">
            <li>books
                <ul class="sub2">
                    <li>fiction</li>
                    <li>biography</li>                    
                </ul>
            </li>
            <li>mobile
                <ul class="sub2">
                    <li>android</li>
                    <li>cmda</li>                    
                    <li>battery</li>
                </ul>
            </li>            
        </ul>    
    </li>
</ul>​

And here is the corresponding CSS:

li {
 border:1px solid;
 padding:1px;
}

.main {
 list-style:none;
 position:relative;    
}

.sub, .sub2 {
 list-style:none;
 position:absolute;  
 display:none;
 width:75px;    
}

.sub2 { 
 float:left;
 left:75px; 
 top:0px;    
}

.main li:hover .sub,
.sub li:hover .sub2{
 display:block;    
}

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

Tips for adjusting the overflow of elements within an HTML table

Is there a way to make td elements scrollable (excluding the table side column) when the screen size is smaller than a certain threshold, x? To clarify, take a look at this example: http://jsfiddle.net/uf32ojm5/7/ My goal is to have only the comments fie ...

What's the best way to arrange a series of images in a horizontal line using html and css?

Looking for a way to display a list of images in a straight line with just the right amount of spacing between them? Check out my fiddle and see the challenge I'm facing. https://i.sstatic.net/ZvICc.png I've been experimenting with HTML c ...

jQuery is great at adding a class, but struggles to remove it

When you click on an anchor with the class .extra, it adds the "extra-active" class and removes the "extra" class. However, when you click on an anchor with the extra-active class, it does not remove the extra-active class and replace it with extra. Here ...

The hover effect fails to function properly after altering the background color. The default color setting is transparent

<button class="button-main slide">Slide Left</button> .button-main{ color: black; outline: none; background: transparent; border: none; letter-spacing: 0.0625em; padding: 8px 10px; text-transform: uppercase; font: b ...

Issue with JavaScript function loading website homepage solely is functioning only for the first time

I am in the process of creating my own personal website. To ensure seamless navigation, I added a "home" button that, when clicked, triggers a JavaScript function called loadhomepage() to load the homepage. While this function works perfectly upon initial ...

Remove multiselect label in PrimeNG

I am attempting to change the multiselect label of selected items and replace it with a static default label. Here is what it currently shows: https://i.sstatic.net/qBNHG.png This is what I have tried: .p-multiselect-label { visibility: collapse; ...

jquery's animation causing elements to move abruptly when containing text

For the past hour, I've been grappling with jQuery and could really use some assistance. The following example showcases smooth animations: when you click on either of the divs, the selected div will move left or right if the viewport is wider than 70 ...

Unable to match the height of the inner card image in bootstrap with the height of the outer card image

I'm facing an issue with two bootstrap cards, one nested inside the other, both containing images. Check out the StackBlitz here The inner image doesn't flex to the same height as the outer one, resulting in a small space between the two cards ...

What is the best way to implement CSS properties dynamically in real-time?

Hey there, I’m working with some HTML code here <div id="div1"></div> I’m dynamically loading content onto this div and adjusting its width in the "success" function based on the contents Here’s the jQuery code snippet I’m using Th ...

The footer should remain at the bottom of the page without being permanently fixed

Is there a way to keep the bootstrap footer at the bottom without fixing it in place? In the code example below, the footer should always appear at the bottom. The white space after the footer should come before it. Using sticky-bottom achieves this, but ...

JQuery magic: A shrinking header that changes size as you scroll

There have been countless inquiries regarding how to animate a header to shrink as the page is scrolled down. While I have some understanding of the responses to similar questions, I find my case to be rather complex. The header on my page takes up too muc ...

Mobile sidebar now includes a button that remains in a fixed position as the sidebar is

I recently added a fixed button to the bottom right corner of my div. Now, I wanted to incorporate a sidebar that slides out on hover and contains a menu. However, when the sidebar is activated through a button click on mobile devices, the fixed button goe ...

divs with sticky sidebars are a common design choice

I have a sidebar for each div and I want to make all the sidebars fixed when scrolling down. You can find the code snippet here: var tmpWindow = $(window), sidebar = $('.sidebar'), sidebarHeight = sidebar.height(), offsetBottom = $( ...

Creating a webpage that adjusts its layout and design based on the screen size

To enhance the homepage layout, my goal is to split it into three distinct adaptive sections horizontally: a header, a body, and a footer. Additionally, the body section should be further segmented into three equally responsive vertical parts. Please pr ...

Is it possible to display a Twitter feed within a Bootstrap popover?

Is it feasible to showcase a Twitter feed within a Bootstrap popover? For instance, when the Twitter button is clicked, I aim to have my website's Twitter feed appear inside a Bootstrap popover. I have attempted the code below without success. Any a ...

Generating small image previews in JavaScript without distorting proportions

I am currently working on a client-side Drag and Drop file upload script as a bookmarklet. To prepare for the upload process, I am utilizing the File API to convert the images into base64 format and showcase them as thumbnails. These are examples of how m ...

What is the best way to horizontally align an image beneath a navigation menu that is built using <ul> tags?

Seeking a way to center an arrow graphic under the selected item in a simple CSS drop-down menu? Considering using the :after selector, but currently being used for drawing dividing lines between menu options: HTML: <ul> <li>Option Zero&l ...

Difficulties arising from Bootstrap menu causing interference with dropdowns

I am facing a problem with the two navigation menus on my website. Both menus are of the same type and are built using Bootstrap. The first navigation menu uses the “navbar-inverse” class, while the second one uses the “navbar-default” class with s ...

I'm experiencing an issue with my Bootstrap Navbar Toggle not toggling

Struggling for weeks now to figure out what's wrong with this code. It works perfectly until I resize the browser, then the menu stays open no matter how many times I click the toggle. I want it to be closed by default and only open when the toggle is ...

Ways to adjust the size of the parent element based on the height of a specific element

I am faced with a situation where I need to identify all elements belonging to a specific class and adjust the padding-bottom of their parent div based on the height of the matched element. For example, consider the following structure: <div class=&ap ...