logo
down
shadow

dropdown menu without borders


dropdown menu without borders

By : Lukram Thoi
Date : November 19 2020, 12:41 AM


Share : facebook icon twitter icon
what would be the simplest / best way of creating a dropdown menu with the following look (has odd borders and needs to

what would be the simplest / best way of creating a dropdown menu with the following look (has odd borders and needs to


By : user3407486
Date : March 29 2020, 07:55 AM
This might help you Try this... it took a little while to figure out, and I haven't tested it for cross browser, but it works on IE 9. will probably need tweaking.
I added a div with a high z-index to mask part of the top border for the nested
    code :
    #header {
        margin:0;
        padding:6px 0 5px 0;
        background-color:#FFFFFF;
        list-style-type:none;
    }
    
    li.dropdown {
        position:relative;
        display:inline;
        margin:0;
        padding:0;
    
    }
    
    div.borderMask {
        position:absolute;
        display:none;
        background-color:#FFFFFF;
        padding:1px;
        height:1px;
        line-height:1px;
        right:0px;
        left:0px;
        top:13px;
        z-index:1000;
    }   
    
    li.dropdown ul {
        position:absolute;
        display:none;
        background-color:#FFFFFF;
        border:solid 1px #CCCCCC;
        width:150px;
        right:-1px;
        top:13px;
    }
    
    li.dropdown:hover {
        background-color:#FFFFFF;
        border-top:solid 1px #CCCCCC;
        border-left:solid 1px #CCCCCC;
        border-right:solid 1px #CCCCCC;
    }
    
    li.dropdown:hover ul {
        display:inline;
    }
    li.dropdown:hover div.borderMask {
        display:block;
    }
    
    <ul id="header">
        <li class="dropdown"><span>Our Locations</span>
            <div class="borderMask"></div>
            <ul>
                <li><a href="">London</a></li>
                <li><a href="">New York</a></li>
            </ul>
        </li>
        <li class="dropdown"><span>Language Selector</span>
            <div class="borderMask"></div>
            <ul>
                <li><a href="">English</a></li>
                <li><a href="">German</a></li>
                <li><a href="">French</a></li>
                <li><a href="">Chinese</a></li>
                <li><a href="">Mandarin</a></li>
            </ul>
        </li>
    </ul>
    
How to prevent overlapping dropdown menu with borders?

How to prevent overlapping dropdown menu with borders?


By : JoaoCostaMar
Date : March 29 2020, 07:55 AM
Hope that helps Short answer is to add margin-top: 5px; to #nav ul ul, where 5px is the same value of the bottom border width.
Note the following set of style outputs a trapezoid shape1 bottom border on hover.
code :
#nav ul li { border: 5px solid transparent; }
#nav ul li:hover { border-bottom: 5px solid #9e4a45; }
#nav {
    background-color: #e26a63;
}
#wrap {
    display: table;
    height: 100px;
    margin: 0 auto;
}
#nav ul {
    padding: 0;
    margin: 0;
    display: table-cell; 
    vertical-align: bottom;
}
#nav ul li {
    display: inline-block;
    border-bottom: 5px solid transparent;
}
#nav ul li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: white;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #e26a63;
    margin-top: 5px;
}
#nav ul ul li {
    display: block;
    min-width: 200px;
}

/* hover */
#nav ul li:hover {
    background-color: #cb5f59;
    border-bottom-color: #9e4a45;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul li:hover li {
  border-bottom-width: 0;
}
<div id="nav">
	<div id="wrap">
    	<ul>
        <li><a href="#">Home</a></li><li>
        <a href="#">Study</a></li><li>
        <a href="#">Games</a>
        	<ul>
            	<li><a href="#">Riddles</a></li><li> 
                <a href="#">Flip card game</a></li><li>  
                <a href="#">Spot the mistake</a></li><li> 
                <a href="#">Multiple choice</a></li>            	
            </ul>
          </li><li>
        <a href="#">Read</a></li><li>
        <a href="#">Contact</a></li><li>
        <a href="#">About Us</a></li>
        </ul>
    </div>
</div>
#nav {
    background-color: #e26a63;
}
#wrap {
    display: table;
    height: 100px;
    margin: 0 auto;
}
#nav ul {
    padding: 0;
    margin: 0;
    display: table-cell; 
    vertical-align: bottom;
}
#nav ul li {
    display: inline-block;
}
#nav ul li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: white;
}
#nav ul li:after {
    content: "";
    display: block;
    height: 5px;
}
#nav ul ul {
    display: none;
    position: absolute;
    background-color: #e26a63;
    margin-top: 5px;
}
#nav ul ul li {
    display: block;
    min-width: 200px;
}

/* hover */
#nav ul li:hover {
    background-color: #cb5f59;
}
#nav ul li:hover:after {
    background: #9e4a45;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul li:after {
    height: 0;
}
<div id="nav">
	<div id="wrap">
    	<ul>
        <li><a href="#">Home</a></li><li>
        <a href="#">Study</a></li><li>
        <a href="#">Games</a>
        	<ul>
            	<li><a href="#">Riddles</a></li><li> 
                <a href="#">Flip card game</a></li><li>  
                <a href="#">Spot the mistake</a></li><li> 
                <a href="#">Multiple choice</a></li>            	
            </ul>
          </li><li>
        <a href="#">Read</a></li><li>
        <a href="#">Contact</a></li><li>
        <a href="#">About Us</a></li>
        </ul>
    </div>
</div>
Styling the borders on a BootStrap dropdown menu

Styling the borders on a BootStrap dropdown menu


By : anusha anu
Date : March 29 2020, 07:55 AM
Any of those help Here's the code you need to make the looks work, since there was no js I didn't work in the functionallity.
As a side note avoid using inline-style since it is harder to maintain and they override your css properties unless you declare !important on them.
code :
 .dropdown {
   list-style: none;
   display: inline-block;
   min-width: 300px;
 }
 
 .dropdown-toggle {
   padding: 5px;
   text-decoration: none;
   background-color: #ffffff;
   display: inline-block;
   font-size: 14px;
   border: 1px solid #000000;
   border-bottom-color: transparent;
   margin-bottom: -1px;
 }
 
 .dropdown-menu {
   margin: 0;
   list-style: none;
   white-space: nowrap;
   border: 1px solid black;
   padding: 10px;
   background-color: #ffffff;
 }
<li class="dropdown">
  <a href="#" id="need-help-dropdown" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" role="button" aria-haspopup="true" aria-expanded="false">Need Help?</a>
  <ul class="dropdown-menu" id="need-help-ul">
    <li>Content</li>
    <li>Content </li>
    <li>Content</li>
    <li>Content</li>
  </ul>
</li>
How to achieve this menu layout? With full-height borders and the dropdown-menu properly aligned with the menu border bo

How to achieve this menu layout? With full-height borders and the dropdown-menu properly aligned with the menu border bo


By : Dima Chait
Date : March 29 2020, 07:55 AM
Any of those help I want to have a menu like below, where: , From what I understood this is what you are after:
code :
.logo {
  border-right:1px solid gray;
  height: 40px;
  border-bottom: 1px solid gray;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;
}
.dropdown-menu {
  border-radius: 0;
  border: 1px solid gray;
  margin-top: 0;
}
CSS dropdown menu borders and slight offset

CSS dropdown menu borders and slight offset


By : bluesauce
Date : March 29 2020, 07:55 AM
it should still fix some issue Nevermind. Tweaked the CSS code a bit differently and found the right solution.
code :
.parent-menu {
    overflow: hidden;
    background-color: black;
}
.parent-menu > li{
    padding: 10px;
    padding-left: 16px;
    padding-right: 16px;
    float: left;
    color: rgba(255,255,255,0.7);
    border-right: 1px solid rgba(255,0,0,0.5);
}

.parent-menu > :first-child {
    color: red;
    padding-left: 18px;
    padding-right: 18px;
    border-left: 1px solid rgba(255,0,0,0.5);
}

.sub-menu li{
    display: none;
    position: absolute;
    z-index:1;
}
.sub-menu {
    display:block;
    color: blue;
    float: left;
    text-align:left;
}
.sub-menu-caption:hover .sub-menu{
    display: block;
    position: absolute;
    top: 30px;
    left: 0px;
}   
.sub-menu-caption:hover .sub-menu li{
    display: block;
    position: static; 
    background-color: black;
    width: 100%;
    border: 1px solid rgba(255,0,0,0.5);
    border-top: 0;
    font-style: italic;
    font-size: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px; 
    padding-right: 3px;
}
.sub-menu-caption:hover .sub-menu :last-child{
    border-radius: 0px 0px 4px 4px;
}
.sub-menu-caption:hover .sub-menu :first-child{
    padding-top: 12px;
}

.sub-menu-caption:hover .sub-menu li a:hover{
    color: red;
}
#main-menu {
    top: 0;
    text-transform: uppercase;
    position: sticky;
    z-index:1;
    margin-bottom: 30px;
}

article {
    position: relative;
    width: 90%;
    margin: auto;
}
article.main-container > :first-child {
    font-variant: small-caps;
}

.parent-menu  a:link {
    text-decoration: none;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
}
.parent-menu  a:visited {
    text-decoration: none;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
}
.parent-menu  a:hover {
    text-decoration: underline;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
}
.parent-menu a:active {
    text-decoration: none;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
}
li.right-menu.upper-menu {
    background-color: rgba(255,0,0,0.5);
    float: right;
    background-clip: padding-box;
}
Related Posts Related Posts :
  • css root element margin
  • What is the point of using absolute positioning in CSS?
  • Responsive solution for long URLs (that exceed the device width)
  • Divs don't collapse as they should - media queries
  • QTreeWidgetItem display html
  • Testing html/css image on local from jfiddle
  • long attribute value of HTML
  • Why my svg picture is truncated at the bottom when embedded in html
  • Display CSS: some divs fixed, some flexible (2)
  • How to append href strings with variables in html with PHP?
  • css - Why is there a big white space between text lines?
  • div image position fixed + scroll
  • Hide specific elements from html using css
  • how to align the arrow in menu item?
  • How do I create a trapezoidal button using CSS?
  • Background position seems to be inaccurate
  • CSS background color is overruled by the background image
  • Oblique or twisted border shape
  • Overflow in div tag doesn't work
  • How to show the vertical image into horizontal manner using HTML and CSS?
  • css3 animation issue move div to left and move it back
  • HTML <code> - get rid of newlines
  • Vertical Align Two Spans (Different font size)
  • Position fixed not working with video poster
  • Having issues placing html buttons side by side in a form
  • how to center text in the middle of the page
  • Sublime Autocompletion for HTML using Emmet inside .sublime-autocompletion file
  • Align bottom wrapped text at the left of an image
  • I'm trying to get :after:hover to work
  • Header and Picture won't Display Correctly
  • SVG stacking, anchor elements, and HTTP fetching
  • Positioning two elements on opposite ends of a 100% with header
  • How to overlay an image inside an image with HTML, CSS
  • Selected date isn't kept in select box
  • How to change background colour of entire div on hover?
  • Two gradients with two distinct sections with just one div element
  • Indent even rows of hexagons in CSS
  • Unwanted filled letters in webpage
  • Mask password character size too small
  • Show div #2 while hovering relative div #1 with translition effect in one container
  • Stacking Tables for a responsive HTML email
  • Hyperlink button created via text/css
  • Checkboxes aligned in a row
  • HTML <title> tag appearing on page
  • I need some assistance with Div Tags
  • CSS Navigation Bar is not horizontal and has wrong colours
  • Background-image width & height 100%
  • Set div height to window height
  • Image/Link alignment issue with bottom navbar
  • CSS hover bubble does not seem out
  • Centering media object on page using Bootstrap
  • Fading out/color overlay on background image
  • Load video after clicking a button or link inside div and stack the trigger, poster image, and video
  • Using Django template tag in <img> tag
  • What are the drawbacks of using 'Mega CSS Sprites' for mobile site?
  • VBScript in HTML (Inline): How to refresh and quit
  • CSS effect works in Chrome but not IE 11
  • HTML Word Wrap is not working properly?
  • Clicking a button within an IE table
  • Have margin between my cells
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org