I want to do my hover like this: http://i.imgur.com/yi3Ehu2.png .
I have done something like this: http://jsfiddle.net/szsq2424/
If I use that hover using botom-border without display: block on anchor elements, ir looks like i want. But when I use display: block on a elements in white header class (to make all the button clickable, not just the text) , it takes that border down to the bottom of the button. Some ideas friends ?? Thanks ! I am new to html + css , appreciate the help !
Wrap the text inside the anchor with a span and apply the border to that.
.white-header {
width: 1400px;
background-color: white;
margin: 0;
padding: 0;
}
.white-header ul {
margin: 0 0 0 100px;
padding: 0;
}
.white-header ul li {
list-style: none;
float: left;
line-height: 60px;
}
.white-header ul li a {
display: block;
text-align: center;
}
.white-header ul li a:link,
.white-header ul li a:visited {
color: #3f3f3f;
text-decoration: none;
}
.white-header ul li a:hover {
color: #57C5A0;
}
.white-header ul li a:hover span {
color: #57C5A0;
border-bottom: 2px solid #57C5A0;
}
/********
FIRST BUTTON
********/
.white-first {
width: 120px;
max-height: 60px;
text-align: center;
border-left: 1px solid #383838;
border-right: 1px solid #383838;
}
/********
SECOND BUTTON
*********/
.white-second {
width: 150px;
text-align: center;
border-right: 1px solid #383838;
margin: 0;
}
.white-second a:link,
.white-second a:visited {
color: black;
text-decoration: none;
}
.white-second a:hover {
color: #57C5A0;
padding-bottom: -10px;
}
/******
VISA LIETUVA BUTTON
*******/
.white-third {
width: 270px;
border-right: 1px solid #383838;
}
<header class="white-header">
<ul>
<li class="white-first"><span>Pramogos</span></li>
<li class="white-second"><span>Pramogos</span></li>
<li class="white-third"><span>Pramogos</span></li>
</ul>
</header>
you can add text-decoration: underline to :hover to achieve result like on provided image
Related
So I have a horizontal navigation bar on a page. I'm not very good (read: beginner) with code so I pieced it together from tips and tricks I found across the web. What I want to add is a code to make a vertical subsection create a another vertical subsection but next to it when hovered on. Here's what I have:
HTML:
<div id="wrap">
<ul class="navbar">
<li> Class Schedules
<ul>
<li> 2015
<li> 2015 Fall </li>
<li> 2015 Spring </li>
2014 ... etc
CSS:
#wrap {
width: 100%;
height: 50px;
margin: 0em;
z-index: 99;
position: fixed;
top: 0px;
background-color: #4d4d4d;
}
.navbar {
height: 50px;
padding: 0;
margin: auto;
position: absolute;
border-right: 1.5px solid #e68a00;
border-left: 1.5px solid #e68a00;
}
.navbar li {
height: auto;
width: 200px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #4d4d4d;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #ffa11a;
border-right: 1px solid #e68a00;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {background-color: #999999;}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #4d4d4d;
}
.navbar li ul li a {
border-left: 1px solid #e68a00;
border-right: 1px solid #e68a00;
border-top: 1px solid #ffa11a;
border-bottom: 1px solid #e68a00;
}
.navbar li ul li a:hover {background-color: #999999;}
}
With what I have, when mousing over "class schedules", a drop down containing "2015", "fall 2015", "spring 2015" appears. What I want it to do I drop down to just "2015" and when you mouse on 2015, it pops over and down to "fall 2015" and "spring 2015". I've messed with the CSS trying to have ".navbar li ul li" etc be hidden until hover but I can't get it to work. I'm not sure what I need to change/add to make this happen.
The trick is this:
.navbar li:hover > ul {display: block;}
because .navbar is a class selector not an element selector.
My dropdown works fine, except it closes before i can move mouse top of last link in it.
CSS
nav {
width: 100%;
display: inline-block;
margin-bottom: 1%;
text-align: center;
background-color: #F0F0F0;
}
nav .links {
width: 100%;
line-height: 1.2;
font-size: 100%;
text-decoration: underline;
text-align: center;
}
nav .links a {
color: #666666;
text-decoration: none;
word-spacing: normal;
}
nav .links a:visited {
color: #666666;
text-decoration: none;
}
nav .links a:hover {
color: #383838;
text-decoration: none;
}
nav .links a:active {
color: #666666;
text-decoration: none;
}
nav ul {
position:relative;
list-style:none;
color: #666666;
white-space: nowrap;
}
nav li{
position:relative;
float: left;
margin-left: 5%;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
line-height: 1.2;
}
ul li:hover ul {
display: block;
}
HTML
<nav>
<div class="links">
<ul>
<li>ETUSIVU</li>
<li>HENKILÖKUVA JA HISTORIA</li>
<li>KORISTEKERAMIIKKA</li>
<li>GALLERIA
<ul>
<li>Keramiikkaveistokset</li>
<li>Keramiikka - kuparityöt</li>
<!--Next link is the one where dropdown closes before mouse reaches it-->
<li>Krisu testi</li>
</ul>
</li>
</ul>
</div>
I tested it with Chrome and FF. CSS is not top skill for me and i think this should work but obviously im wrong :)
I would appreciate help with this greatly, thanks.
EDIT
I changed nav ul li ul as...
nav ul li ul {
z-index: 1;
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
}
and now it works just fine. So basically i just added z-index there.
There is an image right below dropdows, not sure is it possible that it messes this one? Atleast z-index did help...
What I am doing:
On hover of a button I am addding a border-bottom of 5px.
JS FIDDLE: http://jsfiddle.net/mUCNB/
Problem:
The problem is the border bottom extends 1px too far on both the left and right side.
Question:
Does anyone know how to fix this?
Relevant Code:
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
border-right: 1px solid #ffffff;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
border-left: 1px solid #ffffff;
}
#main-nav a:hover {
height: 30px;
border-bottom: 5px solid #0BC6F5;
}
Since CSS borders 'miter' at the edges, you're going to notice that phenomenon. To work around this, I've created rules to highlight the li BEHIND the a that is on hover. This creates the effect that you are getting a clean border at the bottom. You can retain those white separators between your elements too then.
Forked Fiddle
CSS
* {
margin: 0px;
padding: 0px;
outline: none;
}
#header {
background-color: #00a0c8;
min-height: 118px;
}
#headerContent {
width: 980px;
min-height: 118px;
margin: 0 auto;
background-color: #00a0c8;
}
nav {
width: 980px;
margin: 0 auto;
}
nav li {
border-left: 1px solid #fff; /* Added border to nav li */
display: block;
float: left;
height: 50px; /* Give it height */
}
#main-nav li:hover {
background: #0BC6F5; /* Give background color to li on hover */
}
nav li:first-child {
border-left: none;
}
#main-nav li a {
display: block;
padding-top: 15px;
text-align: center;
height: 35px;
font-size: 18px;
line-height: 18px;
color: #fff;
text-decoration: none;
background-color: #00a0c8;
}
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:nth-child(3) {
width: 225px;
}
#main-nav li a:last-child {
width: 224px;
}
#main-nav li a:hover {
height: 30px;
}
Hope that helps.
you can solve this issue by removing the border-left and border-right styles from the following:
updated css:
#main-nav li a:first-child, #main-nav li a:nth-child(2) {
width: 224px;
}
#main-nav li a:last-child {
width: 224px;
}
updated fiddle
Also a neat trick is to just use box-shadow instead, to apply the conflicting border:
#main-nav a:hover {
height: 30px;
box-shadow:0 5px 0 -1px #0BC6F5;
}
This works, if you just replace your current hover selector!
if you want to try it first, here's another fiddle:
http://jsfiddle.net/4zzMA/
I am facing some problem with this drop down menu thing. I read your article and it helped me. In the beginning, the drop down worked but when I added some more styling then it stopped working. Other divs and navigation bar is working fine but the drop down menu is not working. Can you please help me pointing out what should be corrected here?
The parent div is nav-bar-left and the style is
.nav-bar-left {
float; left;
overflow: hidden;
width: 980px;
height: 26px;
background-color: Lavender;
border: 1px solid MidnightBlue;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
The navigation div is #horizontalmenu which resides within the above parent div and the style is
#horizontalmenu {
width: 733px;
margin: 0;
position: relative;
float: left;
padding: 0;
}
Rest of the styling for navigation bar is
#navbar {
list-style-type: none;
margin: 0;
width: 100%;
padding: 0;
position: relative;
display: inline-table;
height: 26px;
z-index: 5;
}
#navbar li {
float: left;
position: relative;
}
#navbar a:link, #navbar a:visited {
display: block;
color: #333;
background-color: lavender;
text-align: center;
padding: 6px 10px;
border-style: solid;
border-color: MidnightBlue;
border-width: 0 1px 0 0;
text-decoration: none;
font-size: 14px;
line-height: 14px;
}
#navbar a:hover, #navbar a:active {
color: #fff;
background-color: #6b0c36;
text-decoration: underline;
}
#navbar ul {
left:-9999px;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#navbar ul li {
float:none;
border-style: solid;
border-color: Lavender;
border-width: 0 1px 1px 1px;
}
#navbar ul a {
white-space: nowrap;
}
#navbar li:hover ul {
left: 0;
}
#navbar:hover a {
text-decoration: none;
}
#navbar li:hover ul a {
text-decoration: none;
background-color: Lavender;
color: #333;
}
#navbar li:hover ul li a:hover {
background-color: Lavender;
color: #333;
}
So, why is it not working and what can be done?
I found this menu CSS one of my best collection for dropdown menu:
Create a Multilevel Dropdown menu with CSS and improve it via jQuery
And you can find a backup of those codes here in my pastebin.
Small question on how to achieve some styling on a HTML / CSS UL menu.
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
http://jsfiddle.net/WMQqt/
(HTML)
<ul id="nav">
<li>CONTACT US
</li>
<li>HOME
</li>
</ul>
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
Similar to how this looks:
http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method?
Thanks for any advice, I'm no expert with HTML / CSS.
Add margin to a tag and move border to li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
DEMO
you can use the following styles to achieve what you want:
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
http://jsfiddle.net/WMQqt/4/
ok
in html go
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
dl { display: flex;
flex-direction: column;}
some hints...
dt float left AND
dd float right