Got a slightly annoying issue that I am at my wits end with so looking for some help.
I have made a CodePen for a navigation - http://codepen.io/nickelse/pen/yNwPwv
When you hover over one of the nav links it covers the left divider but shows the right divider, anyone got any suggestions on how I can have the link hover either cover both dividers or sit in the middle of the two?
Cheers,
Nick
<div class="navigation cf">
<div class="menu cf">
<ul>
<li>Poker Chips</li>
<li>
Poker Chip Sets<i class="fa fa-caret-down"></i>
<ul class="sub-menu">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
<li>Sub Link 4</li>
</ul>
</li>
<li>Poker Tables</li>
<li>Poker Chip Cases</li>
<li>Poker Playing Cards</li>
<li>Poker Accessories</li>
</ul>
</div>
</div>
body {
background: #272727;
}
/*----- Menu Outline -----*/
.navigation {
width: 100%;
background: #454545;
border-bottom: 3px solid #666;
}
.menu {
width: 1000px;
margin: 0px auto;
text-align: center;
font-size: 0;
}
.menu li {
margin: 0px;
}
.menu a {
transition: all linear 0.15s;
color: #fff;
}
.menu li:hover > a {
text-decoration: none;
color: #ddd;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul {
margin: 0;
padding: 0;
}
.menu > ul > li {
display: inline-block;
position: relative;
font-size: 14px;
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
.menu > ul > li:first-child {
background: none;
}
.menu > ul > li > a {
padding: 20px 24px;
display: block;
}
.menu > ul > li:hover > a{
background: #666;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 280px;
padding: 0;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.2s;
background: #666;
text-align: left;
}
.sub-menu li {
display: block;
font-size: 14px;
}
.sub-menu li a {
padding: 10px 24px;
display: block;
color: #fff;
}
.sub-menu li a:hover {
background: #353535;
}
.navigation .fa.fa-caret-down {
margin-left: 6px;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/** For IE 6/7 only - Include this rule to trigger hasLayout and contain floats. */
.cf {
*zoom: 1;
}
The divider is actually associated with the li next to the one being hovered so the quick solution is to hide it so:
.menu li:hover + li {
background-image: none;
}
Codepen Demo
Add padding:3px; for li tag
.menu > ul > li {
padding:3px; //added this
display: inline-block;
position: relative;
font-size: 14px;
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
Demo here
Don't mess around with padding or margin, just define that the <li> to the right of the focussed <li> should not have the background that displays the border.
Add this bit of CSS code:
.menu > ul > li:hover + li {
background: none;
}
http://codepen.io/anon/pen/MwxrGx
Related
I have a multi-level dropdown but it opens to the right by default. I have tried to tweak it a lot but doesn't seem to work no matter what I try.
I'll provide the code here. The HTML might be a little messed up because I had to remove the rails code in there and only leave plain HTML.
The dropdowns open to the right and overflow the window. If anyone has a better way to do it, I am all ears.
.dropdown-wrapper {
ul {
list-style: none;
padding: 0;
margin: 0;
// background: #1bc2a2;
}
li>ul {
margin-right: 190px;
}
ul li {
font-size: 16px !important;
margin-top: 10px;
display: block;
position: relative;
color: goldenrod;
float: left;
min-width: 100px;
cursor: pointer;
// background: #1bc2a2;
}
ul li:not(:last-child) {
border-bottom: 1px solid goldenrod;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 10px;
text-decoration: none;
white-space: nowrap;
color: goldenrod;
border-radius: 0;
box-shadow: none;
}
ul li a:hover {
background: #FAF9F6;
border-radius: 0;
}
ul li:hover {
background: #FAF9F6;
}
li:hover>ul {
display: block;
position: absolute;
margin-left: 2px;
}
.main-navigation {
ul {
background: white;
}
}
li:hover li {
float: none;
}
// li:hover a { background: #1bc2a2; }
li:hover li a:hover {
background: #FAF9F6;
}
.main-navigation li ul li {
border-top: 0;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
}
<ul class="main-navigation">
<li>Treatments Provided
<ul>
<li>1</li>
</li>
<li>2
<ul>
<li class="">
<a href=>a</a>
</li>
</ul>
</ul>
</li>
</ul>
I have a top navigation bar with 4 options, where I wish that while the fourth option is hovered, a dropdown-menu will display.
The navigation bar is an unordered list, and the dropdown-menu (which should be activated by the fourth option) is a div consisting of 3 links.
The list item that is supposed to display the dropdown-menu while hovered:
<li class="dropdownbutton">Contact</li>
With the help of this line of code:
.dropdownbutton:hover .dropdowncontent {
display:inline-block;
}
And this is the CSS for the dropdown-content:
.dropdowncontent {
display:none;
background-color:#333;
margin-left:272px;
width:90px;
text-align:center;
}
What am I missing?
This should be allright.
ul {
margin: 0;
padding: 0;
list-style: none;
background-color: #333;
}
ul li {
display: inline-block;
position: relative;
text-align: left;
background-color: #333;
}
ul li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 15px;
text-decoration: none;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
font-size: 17px;
font-family: Arial;
}
ul li a:hover {
background-color: #555;
}
ul li ul.dropdown {
min-width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
width: 90px;
}
ul li:hover ul.dropdown {
display: block;
}
ul li ul.dropdown li {
display: block;
}
ul li ul.dropdown li a {
font-size: 14px;
padding: 10px 15px;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact
<ul class="dropdown">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
</ul>
I have a CSS Menu which i have had some help with getting sorted, it nearly works as i would like.
i just want to be able to change the text colour on LI hover and also the sub menu seems to be displaying more to the right when it should be directly underneath
CSS:
.menu-my-integra-container {
border:1px solid black;
display:block;
float:left;
}
#menu-my-integra, ul.sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu-my-integra > li {
float:left;
display: block;
margin-right:0px;
position:relative;
background:#F36F25;
padding:8px;
color:#FFFFFF;
text-decoration:none;
}
#menu-my-integra > li:hover {
background:#FFFFFF;
color:#F36F25;
}
ul.sub-menu {
display:none;
width:200px;
position:absolute;
z-index:1;
}
#menu-my-integra li:hover ul.sub-menu {
display: block;
max-height: 200px;
background:#F36F25;
}
ul.sub-menu li {
color:#FFFFFF;
float:none;
padding:5px;
}
ul.sub-menu li:hover {
color:#F36F25;
background:#FFFFFF;
float:none;
padding:5px;
}
http://jsfiddle.net/c2u21366/
This will change the texts color to the parents:
#menu-my-integra li > a {
color: inherit;
}
Add left: 0; to ul.sub-menu to align your sub-menu to the left.
ul.sub-menu {
left: 0;
}
You color attribute needs to point to the anchor tag rather than the list tag. The colour choice is being overwritten by the default browser style. You need a more direct style path. The following CSS will colour your list as
.menu-item a{
color:#FFFFFF;
}
.menu-item a:hover {
color:#F36F25;
}
css file
<body class="news">
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Your submenu is not properly positioned. You're missing left: 0;. That should fix the positioning.
ul.sub-menu {
display: none;
width: 200px;
position: absolute;
z-index: 1;
left: 0;
}
In regards to hover color
a:hover {
color: #000 !important;
}
Ofcourse I used !important cause I don't understand which color you actually want to change.
Any suggestions for this one?
I've added a background image of an arrow for any list item that has a drop down with the class of 'dropable' now because of this the list items are no longer evenly spaced to account for the added arrow, any suggestion on how to solve this as had no success so far.
CodePen: http://codepen.io/nickelse/pen/GJezQX?editors=110
HTML:
<div class="wrapper">
<div class="container">
<nav>
<ul class="clearfix">
<li>Home</li>
<li class="dropable">WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li class="dropable">Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
CSS:
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #212121;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
.wrapper {
background: #454545;
border-bottom: 3px solid #666;
width: 100%;
}
.container {
margin: 0 auto;
width: 1000px;
}
nav {
margin: 0;
font-size: 0;
text-align: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
}
nav a {
display: block;
padding: 0 20px;
color: #fff;
font-size: 14px;
line-height: 56px;
text-decoration: none;
}
nav a:hover {
background-color: #000000;
}
nav > ul > li {
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
nav > ul > li:first-child {
background: none;
}
nav li:hover + li {
background-image: none;
}
nav > ul > li:hover > a {
background-color: #666;
}
nav ul li:hover > ul {
display: block;
text-align: left;
}
nav ul ul {
display: none;
position: absolute;
top: 56px;
background-color: #666;
}
nav ul ul li {
border-top: 1px solid #454545;
width: 270px;
float: none;
display: list-item;
position: relative;
}
nav ul ul li:first-child {
border-top: none;
}
nav ul ul li a {
line-height: 42px;
}
nav li.dropable a {
background: url(http://i.imgur.com/5Clqhz5.png) no-repeat 93% center;
}
nav li.dropable li a {
background-image: none;
}
nav li.dropable li a:hover {
background: #333;
}
/*
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
Cheers
Nick
Instead of using images for caret, I would suggest using fonts from font-awesome.
This works pretty good
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #212121;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
.wrapper {
background: #454545;
border-bottom: 3px solid #666;
width: 100%;
}
.container {
margin: 0 auto;
width: 1000px;
}
nav {
margin: 0;
font-size: 0;
text-align: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
}
nav a {
display: block;
padding: 0 20px;
color: #fff;
font-size: 14px;
line-height: 56px;
text-decoration: none;
}
nav a:hover {
background-color: #000000;
}
nav > ul > li {
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
nav > ul > li:first-child {
background: none;
}
nav li:hover + li {
background-image: none;
}
nav > ul > li:hover > a {
background-color: #666;
}
nav ul li:hover > ul {
display: block;
text-align: left;
}
nav ul ul {
display: none;
position: absolute;
top: 56px;
background-color: #666;
}
nav ul ul li {
border-top: 1px solid #454545;
width: 270px;
float: none;
display: list-item;
position: relative;
}
nav ul ul li:first-child {
border-top: none;
}
nav ul ul li a {
line-height: 42px;
}
nav ul > li.dropable > a:after {
/* display:inline;
content: "\00a0\00a0\00a0\00a0";*/
/* background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;*/
}
nav li.dropable li a {
background-image: none;
}
nav li.dropable li a:hover {
background: #333;
}
/*
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="container">
<nav>
<ul class="clearfix">
<li>Home</li>
<li class="dropable">WordPress <i class="fa fa-caret-down"></i>
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li class="dropable">Web Design <i class="fa fa-caret-down"></i>
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
I would take advantage of the :after pseudo class in CSS. The margins become evenly spaced and you forgo having to put the image into the navigation unnecessarily.
CodePen
nav ul > li.dropable > a:after {
display:inline;
content: "\00a0\00a0\00a0\00a0";
background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;
}
Figured it out, cheers anyway.
I did this:
nav li.dropable a {
background: url(http://i.imgur.com/5Clqhz5.png) no-repeat right 20px center ;
padding-right: 34px;
}
I have been working on a drop down navigation which I have got close to how I like but I'm having trouble figuring out how to get the Logo (which is really just h1 text) and the tagline, to line up with my navigation.
The html for the logo and tagline is:
<div class="logo grid_5 omega">
<ul>
<li><h1>karma.</h1></li>
<li><p id="tagline">A stop motion animation</p></li>
</ul>
</div>
And it's corresponding CSS is this so far:
/* Header (Logo) -------------------------------------------------- */
.header.grid_12.omega {
margin-top:40px;
box-shadow:0 3px 10px #222;
background:#FFFFFF;
}
.logo.grid_5.omega {
float:left;
}
The navigation's html is:
<nav class="grid_7 omega">
<ul>
<li>About</li>
<li>Process
<ul>
<li>Models</li>
<li>Backgrounds</li>
<li>Animation</li>
<li>Post-production</li>
</ul>
</li>
<li>Style</li>
<li>Reflection</li>
</ul>
</div>
</nav>
And it's CSS is:
/* Drop down nav ---------------------------------------- */
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FFF;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
However, as you can see: it's a little off:
http://imgur.com/HDofl9a
Give an id to your main ul and give some top margin?
HTML
<nav class="grid_7 omega">
<ul id="navi">
<li>About</li>
...
</ul>
</nav>
CSS
ul#navi{
margin:30px 0 0 0; /*adjust your top margin*/
}
I think you are looking for this
html
<div class="logo grid_5 omega">
<ul>
<li><h1>karma.</h1></li>
<li><p id="tagline">A stop motion animation</p></li>
</ul>
</div>
<nav class="grid_7 omega navigation">
<ul>
<li>About</li>
<li>Process
<ul>
<li>Models</li>
<li>Backgrounds</li>
<li>Animation</li>
<li>Post-production</li>
</ul>
</li>
<li>Style</li>
<li>Reflection</li>
</ul>
</div>
</nav>
css
.header.grid_12.omega {
margin-top:40px;
box-shadow:0 3px 10px #222;
background:#FFFFFF;
}
.logo.grid_5.omega {
float:left;
}
.logo.grid_5.omega li{
float: left;
line-height: 40px;
list-style-type: none;
margin-right: 25px;
padding-top: 14px;
}
.navigation{
float:left;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FFF;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
jsFiddle File