When I mouse over the red settings-icon, I want the drop down menu to appear. And when I mouse off the settings-icon or dropdown-menu, it goes back to just the settings icon.
I tried using
visibility: hidden;
visibility: visible;
I can't seem to figure it out.
http://jsbin.com/OmEfEGu/2/edit
HTML:
<div class="dropdown-menu">
<div class="check-icon"></div>
<li>Mark as Answered</li>
<div class="trash-icon"></div>
<li>Delete Questions</li>
</div>
CSS:
.settings-icon {
position: relative;
width: 18px;
height: 20px;
background-color: red;
float: right;
margin-right: 10px;
border-top: 1px solid #8b9399;
border-left: 1px solid #8b9399;
border-right: 1px solid #8b9399;
}
.dropdown-menu {
border: 1px solid #8b9399;
background-color: #ffffff;
float: right;
width: 140px;
height: 50px;
margin-right: -20px;
margin-top: 20px;
list-style: none;
font-size: 13px;
}
.settings-icon:hover .dropdown-menu {
visibility: visible;
}
Related
This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 2 years ago.
My primary nav li elements shift downwards whenever I hover over them. I thought this was due to use of margin causing this, but I am still receiving this issue after removing margin use, and I'm not sure what it is. I know it's most likely something simple. Any help would be appreciated. Thank you.
/*primary nav bar*/
.primarynav {
background-color: #ffffff;
border: solid 1px #f76f4d;
position: relative;
height: 50px;
width: 1430px;
top: 10px;
}
.primarynav ul {
position: relative;
padding-bottom: 10px;
text-decoration: none;
padding-left: 100px;
}
.primarynav a {
position: relative;
display: inline-block;
text-decoration: none;
color: #fd886b;
width: 115px;
height: 50px;
padding: 17px 0px 0px 0px;
font-weight: bold;
border: 1px solid orangered;
}
/*primary navigation effects*/
/*.primarynav a:hover::before {
background-color: #fd886b;
}
*/
.primarynav a:hover {
color: white;
background-color: #fd886b;
border: 2px solid orangered;
border-radius: 3px;
}
.mainnavigation li {
display: inline-block;
bottom: 51px;
padding-top: 50px;
text-align: center;
position: relative;
font-size: 15px;
left: 200px;
}
<header class="primarynav">
<div class="primaryContainer"> <!-- Main top of page navigation -->
<nav alt="worldmainnavigation"><!-- Main navigation buttons on the top of the page (6) -->
<ul class= "mainnavigation">
<li>Home</li>
<li>Items</li>
<li>Categories</li>
<li>Favourites</li>
<li>Deals</li>
<li>List An Item</li>
</ul>
</nav>
</div>
</header>
Adding margin: -2px; resolves this, its due to the border: 2px orangered.
.primarynav a:hover {
color: white;
background-color: #fd886b;
border: 2px solid orangered;
margin: -2px;
border-radius: 3px;
}
/*primary nav bar*/
.primarynav {
background-color: #ffffff;
border: solid 1px #f76f4d;
position: relative;
height: 50px;
width: 1430px;
top: 10px;
}
.primarynav ul {
position: relative;
padding-bottom: 10px;
text-decoration: none;
padding-left: 100px;
}
.primarynav a {
position: relative;
display: inline-block;
text-decoration: none;
color: #fd886b;
width: 115px;
height: 50px;
padding: 17px 0px 0px 0px;
font-weight: bold;
border: 1px solid orangered;
}
/*primary navigation effects*/
/*.primarynav a:hover::before {
background-color: #fd886b;
}
*/
.primarynav a:hover {
color: white;
background-color: #fd886b;
border: 2px solid orangered;
margin: -2px;
border-radius: 3px;
}
.mainnavigation li {
display: inline-block;
bottom: 51px;
padding-top: 50px;
text-align: center;
position: relative;
font-size: 15px;
left: 200px;
}
<header class="primarynav">
<div class="primaryContainer"> <!-- Main top of page navigation -->
<nav alt="worldmainnavigation"><!-- Main navigation buttons on the top of the page (6) -->
<ul class= "mainnavigation">
<li>Home</li>
<li>Items</li>
<li>Categories</li>
<li>Favourites</li>
<li>Deals</li>
<li>List An Item</li>
</ul>
</nav>
</div>
</header>
it is because you add 3px border on hover.
I am using HTML lists for dropdown menus in my navbar. The problem I have come across is that when the browser window is small, the dropdown goes off-screen to the left.
I am wondering on the best way to simply center it and stretch the content across 100% at a small screensize.
The problem is the notifications menu (hover over the little envelope).
I've put up some code I ripped from the site which gives you an idea: http://codepen.io/anon/pen/eBeYXd
Hover over the far-right item and the menu will appear, make the browser the size of a mobile screen and see the dropdown move off to the left being cut off.
Code below:
<div class="navigation-main">
<div class="container group">
<ul class="header-navbar">
<!-- notes test -->
<li class="dropdown pull-right alerts-box">
<img src="/templates/default/images/comments/envelope.png" alt=""/> <span class="badge badge-important">1</span> <b class="caret"></b>
<ul class="dropdown-menu">
<li><strong>liamdawe</strong> replied to "test a test test a test test a test test a test te…"</li>
<li class="divider"></li><li>Clear all</li>
<li class="divider"></li>
<li>See all</li>
</ul>
</li>
<!-- notes test -->
</ul>
</div>
</div>
CSS code:
*, *:before, *:after {
box-sizing: inherit;
}
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 10001;
background-color: #222;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.header-navbar>li {
float: left;
}
.header-navbar>.pull-right {
float: right;
}
.header-navbar>li>a {
display: block;
color: #999;
padding: 14px;
}
.header-navbar>.active>a {
color: #FFF;
background-color: #000;
}
.header-navbar>li>a:hover {
color: #FFF;
text-decoration: none;
}
.header-navbar>.header-brand>a {
line-height: 0;
padding: 9px 14px;
margin-left: -14px;
}
.header-search {
padding: 9px 0;
}
.header-search .search-field {
width: auto;
background-color: #333;
border: 1px solid #5c5c5c;
outline: none;
line-height: 19px;
height: 30px;
color: #fff;
margin: 0;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.header .dropdown-menu {
border-top-width: 1px;
}
.header .dropdown:hover .caret {
border-top-color: #FFF;
}
.header-avatar {
padding: 9px 0 9px 14px;
}
.dropdown {
position: relative;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px solid #999;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: ""
}
.dropdown-menu {
position: absolute;
top: 49px;
left: 0;
z-index: 999;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 0;
list-style: none;
text-align: left;
background-color: #222;
border: 1px solid #000;
box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
display: none;
}
.dropdown-menu li {padding: 0 15px 2px;}
.dropdown-menu .divider {
*width: 100%;
height: 1px;
padding: 0px;
margin: 9px 0;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #383838;
}
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
white-space: nowrap;
padding: 2px;
}
.dropdown-menu li>a:hover, .dropdown-menu li>a:focus {
text-decoration: none;
color: #fff;
}
.pull-right .dropdown-menu {
right: 0;
left: auto;
}
.pull-right {
float: right;
}
.nav-avatar {
vertical-align: middle;
background-color: #333;
}
play with min-width: or max-width: and probably allow your text to wrap
something like this
.dropdown-menu a {
display: block;
clear: both;
line-height: 26px;
color: #999;
min-width: 200px;
white-space: wrap;
padding: 2px;
}
I have a tabbed LI system that (properly) wraps when the screen shrinks. However, the content below these tabs needs to start below the last tab that has wrapped. Can someone show me how this is done?
FIDDLE
http://jsfiddle.net/jeljeljel/k5prw30g/5/
HTML
<div class="bwtab">
<ul>
<li class="active">AAAAAAAA1</li>
<li>AAAAAAAA2</li>
<li>AAAAAAAA3</li>
<li>AAAAAAAA4</li>
<li>AAAAAAAA5</li>
<li>AAAAAAAA6</li>
<li>AAAAAAAA7</li>
<li>AAAAAAAA8</li>
<li>AAAAAAAA9</li>
<li>AAAAAAAA10</li>
</ul>
</div>
<div>This content should display below the tabs</div>
CSS
.bwtab {
clear: both;
position: relative;
border-bottom: 1px solid #AAA;
height: 34px;
font-size: 14px;
cursor: default;
}
.bwtab ul {
position: absolute;
padding: 0;
padding-left: 5px;
margin-top:7px;
}
.bwtab li {
list-style: none;
float: left;
padding: 5px 10px;
margin-left: 5px;
margin-top: 1px;
cursor: pointer;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #AAA;
border-bottom: 0;
margin-bottom: 5px;
}
.bwtab li.active {
background-color: #FFF;
border-bottom: 1px solid #FFF;
}
I'm making a breadcrumb menu and attempting to do it in pure CSS so I don't have to use a background image to get an arrow shape. Is it possible to achieve this angled border style with pure CSS?
The best I have been able to do looks like this (this is just a draft screenshot I made a while ago, so please disregard that it implies that breadcrumbs are fruits and/or delicious):
I was achieving it using CSS like this:
.breadcrumb li {
border-right: 2px solid #ECECEC;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
Here's the whole CSS in case it helps:
div.breadcrumb {
display: block;
float: left;
border-bottom: 2px solid gray;
}
ul.breadcrumb {
display: block;
float: left;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.breadcrumb li {
float: left;
display: list-item;
background-color: #F2F2F2;
border-right: 2px solid #ECECEC;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
position: relative;
padding: 9px 20px 10px 35px;
margin-left: -32px;
}
.breadcrumb li.first-crumb {
background: #E7E7E7;
padding-left: 20px;
margin-left: 0px;
}
.breadcrumb li.last-crumb {
border-top: 1px solid #E3E3E3;
border-right: 1px solid #E3E3E3;
background: white;
padding-top: 9px;
padding-bottom: 9px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.breadcrumb li:not(.first-crumb) {
padding-left: 45px;
}
.breadcrumb li:not(.last-crumb) a:after {
content: "\27F6";
margin-left: 10px;
color: #444444;
margin-right: 0px;
}
.breadcrumb li a,
.breadcrumb li span {
display: block;
float: left;
position: relative;
}
.breadcrumb li a {
text-decoration: none;
}
.breadcrumb li.first-crumb a {
padding-left: 0px;
margin-left: 0px;
}
My markup looks like this:
<div class="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb first-crumb">Produce</li>
<li class="breadcrumb">Fruits</li>
<li class="breadcrumb last-crumb"><span>breadcrumb-ilicious!</span></li>
</ul>
</div>
Edit: It would be nice if I could get it to look like there's an actual border too. This is my crude skitch of it:
(I tried adding several triangles per Olaf's suggestion and the only thing I couldn't get to work was correcting the obvious gap between two triangles without changing the angle of the triangle poking out to form the border.)
Stealing from CSS Tricks - CSS Triangle, you can do something like
li.breadcrumb:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-bottom: 20px solid #eee;
border-left: 20px solid #ccc;
}
li.breadcrumb:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-bottom: 20px solid #eee;
border-left: 20px solid #ccc;
}
li.first-crumb:after {
border-top: 20px solid #ccc;
border-bottom: 20px solid #ccc;
border-left: 20px solid #aaa;
}
li.last-crumb:after {
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 20px solid #eee;
}
li.breadcrumb {
list-style-type: none;
background-color: #ccc;
display: inline-block;
float: left;
line-height: 0;
}
li.first-crumb {
background: #aaa;
}
li.last-crumb {
background: #eee;
}
li.breadcrumb a {
text-decoration: none;
}
<div class="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb first-crumb">Hurr
</li>
<li class="breadcrumb">Durr
</li>
<li class="breadcrumb last-crumb"><span>Furr</span>
</li>
</ul>
</div>
<div class="arrow-right"></div>
Original JSFiddle
you can get those borders too if you want (I have improved the previous answer by Olaf Dietsche):
HTML:
<div class="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb first-crumb">Hurr</li>
<li class="breadcrumb">Durr</li>
<li class="breadcrumb last-crumb"><span>Furr</span></li>
</ul>
</div>
CSS:
li.breadcrumb:before {
content:'';
width: 28.28427px; /* sqrt(40*40 / 2) */
height: 28.28427px;
background:transparent;
position:absolute;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
transform-origin: top right;
top: 20px;
margin:0;
right: 0;
border-right: #000 solid 1px;
border-top: #000 solid 1px;
}
li.breadcrumb:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 20px solid #eee;
border-bottom: 20px solid #eee;
border-left: 20px solid #ccc;
}
li.first-crumb:after {
border-top: 20px solid #ccc;
border-bottom: 20px solid #ccc;
border-left: 20px solid #aaa;
}
li.last-crumb:after {
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 20px solid #eee;
}
li.breadcrumb {
list-style-type: none;
background-color: #ccc;
display: inline-block;
float: left;
line-height: 0;
position: relative;
height: 40px;
}
li.first-crumb {
background: #aaa;
}
li.last-crumb {
background: #eee;
}
li.breadcrumb a {
text-decoration: none;
}
and the fiddle: http://jsfiddle.net/piotku/9cs1zy4h/
Another way to do it is to use an :after element and make this a rectangle with two borders and rotate this.
Here is an example: Breadcrumb
Main CSS:
li-item:after {
content: "";
width: 5rem;
height: 100%;
display: inline-block;
position: absolute;
background: transparent;
right: 0;
top: 0;
transform: translateX(-1rem) rotate(45deg);
border-right: 4px solid white;
border-top: 4px solid white;
}
I would like to have a little triangle underneath the the text that points up when the user hovers over the different tabs. Here is a bit of code I'm working with.
css navbar
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 10px;
}
.tab {
width: 100%;
padding: 5px;
background: #fff;
color: #000;
cursor: pointer;
font-weight: bold;
border-bottom: 1px solid black;
position: relative;
}
.tab:hover {
background: #a0a0a0;
}
.tab:hover span {
display: block;
}
.tab_child {
padding: 15px;
background: #fff;
}
.selected {
background: #a0a0a0;
}
.contain * {
float: left;
width: 100px;
}
span.triangle {
background-image: url("http://www.inner.org/torah_and_science/mathematics/images/triangle.gif");
background-repeat: none;
display: none;
height: 14px;
width: 16px;
position: absolute;
top: 25px;
left: 25%;
}
<div class="contain">
<div id="one" class="tab selected">Link1</div>
<div id="two" class="tab">Link2</div>
<div id="three" class="tab">Link3</div>
<div id="four" class="tab">Link4</div>
<div id="five" class="tab">Link5</div>
</div>
I think this is probably what you're looking for:
Fiddle
Also, please use semantic markup:
If your using HTML5 wrap your navigation in <nav> tags.
Your links (if they really are going to be links) should be <a> elements.
For a list of links like you have it is advised to use a list (<ul> & <li>).
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
float: left;
width: 20%;
}
nav a {
display: block;
padding: 5px;
border-bottom: 1px solid black;
background: #fff;
color: #000;
font-weight: bold;
position: relative;
}
nav a:hover,
.active {
background: #bbb;
}
nav a:hover:after {
content: "";
display: block;
border: 12px solid #bbb;
border-bottom-color: #000;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -12px;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</nav>
Here is a modification to your jsfiddle:
I've added a <span class="arrow"></span> to contain the triangles in the HTML:
<div class="tab_container">
<div id="test1-header" class="accordion_headings header_highlight" >Home<span class="arrow"></span></div>
<div id="test2-header" class="accordion_headings" >About<span class="arrow"></span></div>
<div id="test3-header" class="accordion_headings" >Work<span class="arrow"></span></div>
<div id="test4-header" class="accordion_headings" >Social<span class="arrow"></span></div>
<div id="test5-header" class="accordion_headings" >Contact<span class="arrow"></span></div>
</div>
Here are the changes made to your menu which reduce the size of the triangle and position them at the bottom center of each menu item when hovered over:
CSS:
/*
.accordion_headings:hover{
background:#00CCFF;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
}
*/
.accordion_headings{
position:relative;
}
.accordion_headings .arrow{
display:none;
}
.accordion_headings:hover .arrow{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
display:block;
position:absolute;
bottom:0;
left:49%;
}
Here is a fiddle that uses an background-image that will display over the hovered menu item. It not pretty but further css should help with that.
UPDATE
Sorry I must have misread that. Here is a working fiddle with a smaller arrow pointing in the proper direction.