80234

transparent border in menu with css

Question:

I use a menu like below. How do I change the bottom-border from white to transparent so that the border appears as a transparent border. Now, when I set the border transparent, the entire menu is orange (background color of the menu):

<pre class="lang-css prettyprint-override">ul#nav, ul#nav ul { margin: 0; padding: 0; list-style: none; } ul#nav li { position: relative; float: left; width: 118px; } #nav li ul { position: absolute; left: 0; top: auto; margin-left: -999em; border-top: 11px transparent; } #nav li li { width: 135px; z-index: 1; } #nav li ul ul { position: absolute; left: 100%; top: -.1em; margin-left: -999em; } ul#nav li a { display: block; text-decoration: none; text-align: left; background: white; border: none; } * html ul#nav li a { height: 1% } #nav li:hover a, #nav li.over a, #nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover { color: #ff7f00; background-color: white; } #nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a { color: white; background: #ff7f00; margin-left: -10px; border-bottom: 1px solid #FFFFFF; filter: alpha(opacity=95); -moz-opacity: 0.95; opacity: 0.95; } #nav li ul li a { padding: 25px 7px 7px 7px } ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul { margin-left: -999em } ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul, u#navl li li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul { margin-left: 0 }

Answer1:

border-bottom:2px solid rgba(0,0,0,.5);

Answer2:

this code is very difficult to read as it is presented. I presume you have tried border-bottom: 1px transparent; ?

Answer3:

Simply use

border-bottom: none;

<a href="http://jsbin.com/ezoqet" rel="nofollow">Demo</a>

Answer4:

Either use

border-bottom: none;

Or, if you still want to maintain a gap, simply set the colour to transparent:

border-bottom-color: transparent;

Recommend

  • Javascript matrix inversion
  • Can I get entire i18n labels of specific dictionary
  • AWS EC2 tomcat permission denied creating/writing to file
  • How to retrieve data from Firebase Database with join if key only return true?
  • Batch script read a file that's continously written
  • Open default mail app from within Qt with some html
  • How to fix Invalid JWT with JHipster Registry [Docker]?
  • Error when build LineageOS: “make: *** [ninja_wrapper] Error 1”
  • NOTE or WARNING from package check when README.md includes images
  • autotest on ubuntu does nothing
  • sec:authorize not being evaluated on spring-boot project
  • How to delete first 7 characters of folder name by using batch script?
  • date changes on export kendoGrid
  • Google Apps Script fails to generate image from EmbeddedChartBuilder
  • Network communication options in Java (Client/Server)
  • mssql script data insert or update
  • jQuery colorbox breaks postbacks in ASP.NET Web Forms
  • Filtering out choiceless polls in the Django tutorial causes polls in the index to duplicate
  • Could not resolve all files for configuration ':react-native-vector-icons:classpath'
  • Adding a click event to a dynamically created html element using angular2
  • SpringBoot don't replacen System variable {user.home} in Spring Tool Suite Version: 3.8.4.RELEA
  • How to modify the way a ForeignKey field is rendered in a Django admin page to avoid browser crash?
  • In metro, get all inherited classes of an (abstract) class?
  • Please update your Node runtime to version >=0.12.x
  • Modifying native query cannot have named parameter bindings?
  • Extracting a small subset of data from XMLs
  • Javascript inside HTML import not affecting imported HTML
  • opencv deskewing a contour
  • Autocomplete source from project settings
  • how to specify different css for ie
  • Ajax call on Multiple selection in Select box
  • Rotating Towards Path in OpenGL
  • Drag and drop unicode TText in DelphiXe4
  • Did not understand process of initialize in swift programming
  • Comma decimal separator is ignored by ASP.NET MVC model binder
  • How to encrypt Connectionstring written in web.config from codebehind?
  • Can someone explain this Java code (formatting the output using System.out.format) to me?
  • PHP Permalinks.. how to change?
  • What does the “id” field in an Android “Google Play Music” broadcast intent correspond to?
  • XSLT Transformation to validate rules in XML document