{"id":1171,"date":"2010-08-25T12:55:24","date_gmt":"2010-08-25T18:55:24","guid":{"rendered":"http:\/\/webii.net\/blog\/?p=1171"},"modified":"2022-01-31T16:09:29","modified_gmt":"2022-01-31T22:09:29","slug":"transparent-little-dropdown-menu","status":"publish","type":"post","link":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/","title":{"rendered":"Transparent Little Dropdown Menu"},"content":{"rendered":"<p>So you have some dropdown menus on your website, but you would like to make them a little fancier. \u00a0With just a little effort in your stylesheet, you can add a nice transparency effect to the background of the dropdown list.<\/p>\n<p>The CSS is usually applied to the style id created for the drop-down div. \u00a0Perhaps it is something like #subnav or #subnav li (which is the list item inside the div). \u00a0Just remember if you start making list items transparent, they may look a bit fuzzy. \u00a0So you might need to use darker text like black to remain legible.<\/p>\n<p>Opacity is recognized as part of the whole number 1. 1 stands for 100% solid color. \u00a0You can really choose any color as the base background, but you made need to experiment with it as you change the opacity. \u00a0So if you decide to create a 70% opaque menu, just add this as your line in the CSS style:<\/p>\n<p>opacity: 0.7;<\/p>\n<p>But wait, it looks lovely in Firefox yet nothing seems to have happened in Internet Explorer. \u00a0Still another bit to add:<\/p>\n<p>filter:\u00a0alpha(opacity=70);<\/p>\n<p>With these 2 lines you have covered most of the commonly used modern browsers, your menu still works, and you have added a little something nifty to the <a href=\"https:\/\/www.webii.net\/website-services\/web-design\/\">design<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So you have some dropdown menus on your website, but you would like to make them a little fancier. \u00a0With just a little effort in your stylesheet, you can add a nice transparency effect to the background of the dropdown list. The CSS is usually applied to the style id created for the drop-down div. [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":10917,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[16,47,41,300],"tags":[],"class_list":["post-1171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-austin-web-design","category-how-to","category-web-development","category-www-learning-center"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.7 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Transparent Little Dropdown Menu - WEBii<\/title>\n<meta name=\"description\" content=\"Want to add a little something special to your web design? Here is a quick tip on how to add a transparency effect.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transparent Little Dropdown Menu\" \/>\n<meta property=\"og:description\" content=\"Want to add a little something special to your web design? Here is a quick tip on how to add a transparency effect.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Marketing &amp; Web Development Company Blog - WEBii\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/webiinet\" \/>\n<meta property=\"article:published_time\" content=\"2010-08-25T18:55:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-31T22:09:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2010\/08\/Transparent-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"427\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jacqueline Sinex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jacqueline Sinex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/\"},\"author\":{\"name\":\"Jacqueline Sinex\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/person\\\/f4b38a14e3a80c2113ac6397739c77f6\"},\"headline\":\"Transparent Little Dropdown Menu\",\"datePublished\":\"2010-08-25T18:55:24+00:00\",\"dateModified\":\"2022-01-31T22:09:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/\"},\"wordCount\":212,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2010\\\/08\\\/Transparent-Image.jpg\",\"articleSection\":[\"Austin Web Design\",\"How To\",\"Web Development\",\"WWW Learning Center\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/\",\"name\":\"Transparent Little Dropdown Menu - WEBii\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2010\\\/08\\\/Transparent-Image.jpg\",\"datePublished\":\"2010-08-25T18:55:24+00:00\",\"dateModified\":\"2022-01-31T22:09:29+00:00\",\"description\":\"Want to add a little something special to your web design? Here is a quick tip on how to add a transparency effect.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2010\\\/08\\\/Transparent-Image.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2010\\\/08\\\/Transparent-Image.jpg\",\"width\":640,\"height\":427,\"caption\":\"Photo by Markus Spiske on Pexels\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/transparent-little-dropdown-menu\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Austin Web Design\",\"item\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/category\\\/austin-web-design\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Transparent Little Dropdown Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\",\"name\":\"Web Marketing &amp; Web Development Company Blog - WEBii\",\"description\":\"web design . web development . seo . marketing . web hosting . + more\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#organization\",\"name\":\"WEBii\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/fb-banner-webii-seo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/fb-banner-webii-seo.jpg\",\"width\":1200,\"height\":598,\"caption\":\"WEBii\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/#\\\/schema\\\/person\\\/f4b38a14e3a80c2113ac6397739c77f6\",\"name\":\"Jacqueline Sinex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/8b2\\\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg\",\"url\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/8b2\\\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webii.net\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/8b2\\\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg\",\"caption\":\"Jacqueline Sinex\"},\"description\":\"Managing Director\",\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/webiinet\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/jsinex\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Transparent Little Dropdown Menu - WEBii","description":"Want to add a little something special to your web design? Here is a quick tip on how to add a transparency effect.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/","og_locale":"en_US","og_type":"article","og_title":"Transparent Little Dropdown Menu","og_description":"Want to add a little something special to your web design? Here is a quick tip on how to add a transparency effect.","og_url":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/","og_site_name":"Web Marketing &amp; Web Development Company Blog - WEBii","article_author":"https:\/\/www.facebook.com\/webiinet","article_published_time":"2010-08-25T18:55:24+00:00","article_modified_time":"2022-01-31T22:09:29+00:00","og_image":[{"width":640,"height":427,"url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2010\/08\/Transparent-Image.jpg","type":"image\/jpeg"}],"author":"Jacqueline Sinex","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jacqueline Sinex","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/#article","isPartOf":{"@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/"},"author":{"name":"Jacqueline Sinex","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/person\/f4b38a14e3a80c2113ac6397739c77f6"},"headline":"Transparent Little Dropdown Menu","datePublished":"2010-08-25T18:55:24+00:00","dateModified":"2022-01-31T22:09:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/"},"wordCount":212,"publisher":{"@id":"https:\/\/www.webii.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2010\/08\/Transparent-Image.jpg","articleSection":["Austin Web Design","How To","Web Development","WWW Learning Center"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/","url":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/","name":"Transparent Little Dropdown Menu - WEBii","isPartOf":{"@id":"https:\/\/www.webii.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/#primaryimage"},"image":{"@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2010\/08\/Transparent-Image.jpg","datePublished":"2010-08-25T18:55:24+00:00","dateModified":"2022-01-31T22:09:29+00:00","description":"Want to add a little something special to your web design? Here is a quick tip on how to add a transparency effect.","breadcrumb":{"@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/#primaryimage","url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2010\/08\/Transparent-Image.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2010\/08\/Transparent-Image.jpg","width":640,"height":427,"caption":"Photo by Markus Spiske on Pexels"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webii.net\/blog\/transparent-little-dropdown-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webii.net\/blog\/"},{"@type":"ListItem","position":2,"name":"Austin Web Design","item":"https:\/\/www.webii.net\/blog\/category\/austin-web-design\/"},{"@type":"ListItem","position":3,"name":"Transparent Little Dropdown Menu"}]},{"@type":"WebSite","@id":"https:\/\/www.webii.net\/blog\/#website","url":"https:\/\/www.webii.net\/blog\/","name":"Web Marketing &amp; Web Development Company Blog - WEBii","description":"web design . web development . seo . marketing . web hosting . + more","publisher":{"@id":"https:\/\/www.webii.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webii.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webii.net\/blog\/#organization","name":"WEBii","url":"https:\/\/www.webii.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2015\/12\/fb-banner-webii-seo.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/uploads\/2015\/12\/fb-banner-webii-seo.jpg","width":1200,"height":598,"caption":"WEBii"},"image":{"@id":"https:\/\/www.webii.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webii.net\/blog\/#\/schema\/person\/f4b38a14e3a80c2113ac6397739c77f6","name":"Jacqueline Sinex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/8b2\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg","url":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/8b2\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg","contentUrl":"https:\/\/www.webii.net\/blog\/wp-content\/wphb-cache\/gravatar\/8b2\/8b2a612b27eed2b3a9f8e6a977e3a226x96.jpg","caption":"Jacqueline Sinex"},"description":"Managing Director","sameAs":["https:\/\/www.facebook.com\/webiinet","https:\/\/www.linkedin.com\/in\/jsinex"]}]}},"_links":{"self":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts\/1171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/comments?post=1171"}],"version-history":[{"count":0,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/posts\/1171\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/media\/10917"}],"wp:attachment":[{"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/media?parent=1171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/categories?post=1171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webii.net\/blog\/wp-json\/wp\/v2\/tags?post=1171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}