i try to apply hover on box .. means when i drag mouse over menu items then background color must be change so for that i try this code please check
i try this
body {
background-color: black;
}
.lefttabs a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: medium;
color: White;
width: 133px;
margin-left: 0px;
}
.lefttabs ul {
list-style: none;
margin: 0px 20px 0px 0px;
}
.lefttabs li {
list-style: none;
padding: 0px 0px 30px 0px;
}
.lefttabs li a {
list-style: none;
display: block;
}
.lefttabs a:hover,
.offcanvas a:focus {
color: green;
background-color: White;
border-color: Yellow;
color: #000!important;
height: 20%;
width: 10px;
}
<div class="lefttabs" style="width: 187px; height: 422px;">
<ul>
<li>
<a>DASHBOARD</a>
</li>
<li>
<a> EVENTS</a>
</li>
</ul>
</div>
In the above image i hover box but this not completely fill whereas i draw box with white color so i want to fill that box through hover
any solution?
You have to display your padding to your a tag and not to your li tag.
.lefttabs li
{
list-style:none;
}
.lefttabs li a
{
list-style:none;
display:block;
padding: 0px 0px 30px 0px;
}
Related
There is a navigation menu, the design is as given in the image below.
Now, when I hover on About Us sub-menu gets open.
But when I try to move the cursor to the sub-menu item, the sub-menu gets closed - the reason being that hover is being removed from li.
I want the menu to remain open till the cursor reaches the sub-menu item.
Please Note:The space between Menu and sub-menu has to be kept as it is (As indicated with red border in the image above).
You can find the link to the code, here
Any help would be appreciated!
A quick solution:
ul#nav li:hover > ul {margin: 40px 0 0 0; border-top: 10px solid #b58d69; }
Cheers!
You have to make li a bit higher, so it will cover free space between sub-menu and this particular li a. The simplest solution was in this case to add margin to main a tag inside li. There will be more solutions how to achieve this effect (adding padding inside li and applying background-color to a tag), but this one is the fastest one.
Search for "added" and "changed" notes in css below
#menu {
width: 960px;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline-block; /*changed*/
padding-bottom: 10px; /*added*/
position: relative; /*added*/
}
ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
margin: 0;
padding: 0px 20px;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li a.plus_a { /*added*/
position: absolute;
}
ul#nav .current a, ul#nav li:hover > a {
color: #b58d69;
text-decoration: none;
background: #30251b;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav ul {
display: none;
}
ul#nav li:hover > ul {
position: absolute;
width: 920px;
height: 45px;
position: absolute;
margin: 50px 0 0 0;
background: #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #b58d69;
text-decoration: none;
margin: 0;
padding: 0 20px 0 0;
background: #fff;
}
ul#nav li:hover > ul li a:hover {
color: #30251b;
text-decoration: none;
text-shadow: none;
}
ul#nav li:hover > ul {
display:block !important;
}
I have done something like what you are asking for and this might give you an idea. Saw it in a tutorial on youtube fro css only drop down. You could use the idea behind this to solve your problem. But this works for when user clicks on the link.
.fixed-nav-container {
height: 90px;
width: 100%;
background-color: #111;
position: fixed;
z-index: 16;
}
.fixed-nav-container:hover {
opacity: 1;
}
.fixed-nav .active {
padding: 23px 0px;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.fixed-nav {
width: 100%;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
}
.fixed-nav ul {
display: block;
text-align: center;
}
.fixed-nav ul li {
display: inline-block;
padding: 20px 15px;
font-weight: bold;
width: 15%;
border-right: 2px solid #2a2730;
}
.fixed-nav ul li:last-child {
border-right: 0px;
}
.fixed-nav ul li a {
text-decoration: none;
color: silver;
transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
padding: 10px 0px;
}
.fixed-nav ul li a:hover {
font-size: medium;
transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
}
.fixed-nav-content {
position: absolute;
top: 70px;
overflow: hidden;
background-color: #111111;
color: #FFFFFF;
max-height: 0px;
}
.fixed-nav-content a {
text-decoration: none;
color: #FFFFFF;
}
.fixed-nav-content a:hover {
background-color: silver;
box-shadow: inset 0 3px 7px black;
color: #2a2730;
}
.fixed-nav-content:active {
max-height: 400px;
}
.fixed-nav-sub ul {
padding: 0px;
list-style-type: none;
text-align: left;
}
.fixed-nav-sub ul li {
width: 20%;
}
.fixed-nav-sub ul li a {
padding: 10px;
display: inline-block !important;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.nav-item:focus {
background-color: #2a2730;
padding: 10px;
box-shadow: inset 0 3px 7px black;
}
.nav-item:hover ~ .fixed-nav-content {
max-height: 400px;
transition: max-height 0.4s linear;
}
<div class="fixed-nav-container">
<nav class="fixed-nav">
<ul>
<li>
About
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li>About Us</li>
<li>Meet The team</li>
<li>Recent Projects</li>
</ul>
</div>
</div>
</li>
<li>
Services
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li>Civil Works</li>
<li>Electrical</li>
<li>Water Engineering</li>
<li>Telecoms</li>
<li>Info. Technology</li>
<li>Renewable Energy</li>
<li>Consulting</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
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
I've made a css dropdown menu and I want each dropdown option to have a blue background when it is hovered on. However when I try this the background for the option will only be blue when the top half of it is hovered on. Here it is on jsfiddle. If you hover your mouse on the "products" option and then put the mouse under "plates" but above the gray horizontal line the background won't be blue. Can anybody help me? Thank you.
http://jsfiddle.net/hDWuJ/1/
HTML (Note this is a segment of my web page and so it does not have valid syntax)
<h1 id="title">Sample Text</h1>
<div id="HorzLineDiv"><hr></div>
<div id="MenuCenter">
<nav id="Menu" class="MenuBar">
<ul id="drop-nav">
<li>Home</li>
<li>Products <span id="arrowDown">▼</span>
<ul>
<li>Children's Stuff</li>
<li>Plates</li>
<li>Top Sellers</li>
</ul>
</li>
<li>Services <span id="arrowDown">▼</span>
<ul>
<li>Wash 'n' Fold</li>
<li>Blanket Making</li>
<li>Wedding Dress</li>
<li>Custom</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS
body
{
background-color: #dfdfdf;
}
#title
{
text-align: center;
color: #07a8ca;
font-size:60pt;
margin: 0px;
padding: 0px;
text-shadow: 2px 2px 0px #888888;
}
h1
{
margin: 0px;
padding: 0px;
}
hr
{
height: 3px;
color: #07a8ca;
background: #07a8ca;
font-size: 0;
border: 0;
}
#HorzLineDiv
{
width: 95%;
margin: 2% 0% 3% 0%;
margin-left: auto ;
margin-right: auto ;
}
#Menu
{
width:100%;
}
#drop-nav
{
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
ul li
{
display: block;
position: relative;
float: left;
display: inline;
padding: 12px 50px 8px 50px;
margin: 0px 5px 0px 5px;
border-left: 3px solid #07a8ca;
}
ul li:first-child
{
border-left: 0px;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-transform: uppercase;
text-decoration: none;
text-align:center;
color: #000;
font: 25px/1.1em "Kelly Slab","serif";
transition: color 0.4s ease 0s;
-moz-transition: color 0.4s ease 0s; /* Firefox 4 */
-webkit-transition: color 0.4s ease 0s; /* Safari and Chrome */
-o-transition: color 0.4s ease 0s; /* Opera */
}
ul li a:hover
{
color: #FF4D4D;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
}
li:hover a
{
margin:0;
}
li:hover li a:hover
{
background: #21e8fa;
}
#drop-nav li ul li
{
border-top: 0px;
border-left: 0px;
}
#drop-nav ul li a
{
border-top: 3px solid #888;
padding: 13px 0px 13px 0px;
margin: -10px -8px;
text-align:center;
text-transform: none;
position:relative;
top: 13px;
color: #000;
}
#drop-nav ul
{
width:100%;
position:absolute;
right:-5px;
}
a
{
margin:0px;
padding:0px;
}
#arrowDown
{
font-size: 10pt;
vertical-align:text-bottom
}
The main issue is in your margins and padding, but this can be worked around by changing your ul li to display: block; instead of display: inline;.
Of course, this isn't a direct fix to the issue, and there still is an area at the bottom that doesn't work on hover, but it is much smaller than before. The proper way to go about fixing this is fixing your margins and padding.
Demo
UPDATE
Reading deeper into your code, I found the actual problem. It is not in margins or padding as I originally thought, but is a top property of 13px defined in #drop-nav ul li a. That top of 13px was creating a blank, inactive space in your list.
Get rid of that piece and it is working fine: DEMO
I am creating a little animation with glow in navigation.
Glow is behind the navigation menu as seen in picture.
I tried but not clear result, I need same result as shown in picture.
http://jsfiddle.net/naresh_kumar/GCpDW/5/
HTML
<div id="topnav" style="float:right;">
<ul class="nav clearfix">
<li id="menu-item-6">
Home
</li>
<li id="menu-item-8">
<a>Tutor Videos</a>
</li>
<li id="menu-item-7">
<a>Download Font</a>
</li>
<li id="menu-item-9">
<a>news</a>
</li>
</ul>
</div>
CSS
body{background:#000000;}
ul { margin-left: 20px; padding: 0; }
#topnav {
font-size: 8pt;
font-weight: bold;
margin-top: 2%;
float: left;
font-size: 8pt;
margin-bottom: 0;
margin-left: 63px;
margin-right: 0;
margin-top: 4% !important;
padding: 0;
width: 60%;
}
#topnav ul {
background: none repeat scroll 0 0 #E2E2DE;
border: 3px solid #FFFFFF;
line-height: 1;
list-style: none outside none;
margin: 0;
padding: 0;
}
#topnav ul li {
float: left;
width: auto;
}
#topnav ul li a {
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
display: block;
line-height: 30px;
margin: -17px 0;
}
#topnav ul a {
color: #000000 !important;
display: block;
line-height: 24px;
padding: 5px 10px;
position: relative;
text-decoration: none;
z-index: 90;
}
#topnav ul a:hover, #topnav ul ul a:hover {
border-color: white;
color: #0A0A0A;
box-shadow: 0 0 50px gold, 0 0 150px gold;
}
.clearfix:after, blockquote:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix, blockquote {
display: block;
}
.clearfix, blockquote {
display: inline-block;
}
It's going to be difficult to get the glow 'behind' the menu just using CSS3 but with some minor tweaks (including more subtle use of colour for the glow) you can make the example you have already produced look quite reasonable with the glow on top of the menu
#topnav ul a:hover, #topnav ul ul a:hover {
border-color: white;
color: #0A0A0A;
box-shadow: 0 0 100px #ffffee, 0 0 100px #ffffee;
}
Here is a live example:
http://jsfiddle.net/Pzvdv/
<ul id="navigation">
<li>HOME</li>
<li>OUR APPROACH</li>
<li>MENU</li>
<li>GET IN TOUCH</li>
</ul>
#navigation {
float: left;
list-style-type: none;
}
#navigation li {
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}
#navigation li a:link {
color: White;
text-decoration: none;
}
Notice how I can click the link if I'm careful, but when I click the "tab pill" itself, the link isn't clicked.
Any workaround or better ways to accomplish this visual effect?
I want to follow the link href whether the user clicks the actual letters or the container pill.
The padding and other styles have to move from <li> to <a>.
On top of that, you have to add display:block or display:inline-block to the anchor.
Currently, your code does not work as expected, because the padding on the <li> adds a gap between the <li>s border and the anchor.
http://jsfiddle.net/Pzvdv/9/
#navigation li {
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
}
#navigation li a:link {
display: block; /* Or inline-block */
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
padding: 5px;
}
If you add some padding to the link element like so:
#navigation li a {
padding:5px
}
It should work.
Set a to display as a block, i.e.:
a { display:block; }
And add height/width to 100%, and move all padding to there too. That will make it fill the entire list item.
The css for the link needs to be applied to the anchor instead.
#navigation li {
float: left;
}
#navigation li a {
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;=
font-size: 12px;
margin-right: 6px;
padding: 5px;
cursor: pointer;
}
Like this? http://jsfiddle.net/Pzvdv/17/
You're adding all the presentation styles to the li elements instead of the actual links, just switch them and your pill menu works fine:
#navigation li {
float:left;
}
#navigation li a {
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}
You should style the <a> element itself.
#navigation {
float: left;
list-style-type: none;
}
#navigation li a:link {
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}