CSS Multilevel Dropdown Menu
-
I needed a multilevel dropdown menu in css. I couldn't find an error-free menu that I searched. Then I created a menu instance using the Css hover transition effect.
I hope it will be useful for users.It's been a long time, but it may still be useful to someone.
-
@developer_man Very cool! Thanks for sharing!
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
CSS and Javascipt files - website redesign project
UPDATED: We ran a crawl of the old website and have a list of css and javascript links as are part of the old website content. As the website is redesigned from scratch, I don't think these old css and javascipt files are being used for anything on the new site. I've read elsewhere online that you redirect "all" content files if launching/migrating to a new site. We are debating if this is needed for css and javascript files. Examples (A) http://website.com/wp-content/themes/style.css (B) http://website.com/wp-includes/js/wp-embed.min.js?ver=4.8.1
Technical SEO | | CREW-MARKETING0 -
CSS Float Top Left Image not displaying
Using CSS/HTML in Dreamweaver CC, I am trying to display a SEO friendly matrix of six images wide by three deep on the Home Page, but cannot get the first (top left) image to display consistently. The page appears correctly in Dreamweaver Design View, but not in the Live View. Equally it works fine in Safari, but not in Firefox nor I.E. I seem to have tried every CSS variation to resolve this issue, without success. Can someone stear me in the right direction, please? The relevant HTML Code ... Celotex PL4050 - 62.5mm insulated wallboard from £11.96 per m² / £34.45 per board SuperFoil SF19 40mm Multi-foil Roll from £5.23 per m² / £98.00 per 18.75 m² Roll Celotex GA4000 General application Rigid PIR from £8.56 per m² / £24.66 per board Rockwool Full-fill 75mm Cavity Wall Slabs from £3.51 per m² / £1.92 per slab Knauf Earthwool 270mm Loft Roll 44 Combi-Cut from £3.80 per m² / £22.51 per 9.93 m² Roll Kingspan Kooltherm K8 75mm Cavity Wall Boards from £16.26 per m² / £8.79 per board Knauf Earthwool 170mm Combi-cut Loft Roll 44 from £3.16 per m² / £25.34 per 8 m² Roll Kingspan Kooltherm K7 Rigid Phenolic Foam - 75mm £13.91 per m² / £40.05 per board ... The associated CSS code ... #popular {
Technical SEO | | JustInsulation
width: 1050px;
height: 800px;
overflow: hidden;
width: auto;
height: auto;
}
#product1 {
background-image: url(../007-graphics/popular/01-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 24px;
float: left;
overflow: auto;
clear: left;
}
#product2 {
background-image: url(../007-graphics/popular/02-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
opacity: 0.85;
}
#product3 {
background-image: url(../007-graphics/popular/03-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product4 {
background-image: url(../007-graphics/popular/04-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
}
#product5 {
background-image: url(../007-graphics/popular/05-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product6 {
background-image: url(../007-graphics/popular/06-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product7 {
clear: both;
background-image: url(../007-graphics/popular/07-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 24px;
float: left;
max-height: 275px;
opacity: 0.85;
}
#product8 {
background-image: url(../007-graphics/popular/08-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
}
#product9 {
background-image: url(../007-graphics/popular/09-prod.png);
background-repeat: no-repeat;
width: 150px;
height: 265px;
margin-left: 10px;
float: left;
max-height: 275px;
opacity: 0.85;
} ... The complete code is located at - www.just-insulation.com/index.html0 -
For an image which is in the CSS and not the HTML, can you add an alt tag?
I would like to improve SEO on a page with three big images, which are currently hosted in the CSS. The sample I am working with is at http://xquisitevents.com/about-us/ and I put my cursor over the big picture of the wedding dress with bouquet, I inspected the element and saw this code in a div tag: #upperleft { background-image:url(images/AboutTopLeft.jpg); Can I add an alt tag to the CSS somehow, or can I have it added to the HTML? What is the best way to handle this, to include keywords like exquisite weddings and special event designs?
Technical SEO | | BridgetGibbons0 -
DropDown Menu with 175 links in headers, Can it hurt SEO?
I'm planning to add a dropdown menu in my online store header. The dropdown menu will have about 175 options with 175 internal links to different products. Can it hurt my SEO for aving more then 175 internal links on my header. This header will be on every pages. Thank you, BigBlaze
Technical SEO | | BigBlaze2050 -
Do dropdowns count as unique content?
My current site has some extensive unique database content by "widget" type. Currently we display this info into HTML 's, but we are considering utilizing this data in a dropdown field on each respective widget page. I want to ensure we don't have thin content...Does the content within the <option>tags on a dropdown count towards unique content?</option>
Technical SEO | | TheDude0 -
Limit number of links in a page, how to build the menu?
Hi, One of the first SEOMoz tool recommand to me, is to avoid multiple links on the same page. This is fully true, i've more than 600 internal links placed in a menu on the header.
Technical SEO | | vdgvince
This means that each page contains these 600 links at least. User-experience wise, i need to keep this multi-level menu accessible. What would you suggest me ? => No-follow on the links would be useful and not penalizing (if i still have other do-follow links to these pages) => Javascript menu, so that i can't be crawled by google => Any other suggestion? Thank you in advance!0 -
How valuable is content "hidden" behind a JavaScript dropdown really?
I've come across a method implemented by some SEO agencies to fill up pages with somehow relevant text and hide it behind a javascript dropdown. Does Google fall for such cheap tricks? You can see this method used on these pages for example (just scroll down to the bottom) - it's all in German, but you get the idea I guess: http://www.insider-boersenbrief.de/ http://www.deko-und-kerzenshop.de/ How is you experience with this way of adding content to a site? Do you think it is valuable or will it get penalised?
Technical SEO | | jfkorn0 -
Developing a drop down menu: Do I use javascript or pure css?
I am developing a drop down menu and am trying to decide if using javascript instead of just css is worth it. I've done some research on the topic and the opinions seem dated. I know that at one time not using javascript for a drop down menu was important but now less so. Google constantly says that they will not discount the links just because they are not shown until javascript is ran. What I want to know is has anyone discovered from testing that using javascript instead of css for a drop down makes a difference? Note: the links will not be located in an external javascript file.
Technical SEO | | seozachz0