The styling I look into achieving can be shown in this screenshot:.
Please tell how to create the effect that i pointed out using CSS.
a{
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
This should work for links, however the effect in the picture seems to be made with the link's container border:
div.yourcontainer:hover{
border-bottom:2px solid red;
}
This should work ^^
By using :hover and setting a border-bottom. Something like this
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
margin: 0 5px;
}
ul li a{
text-decoration:none;
color: black;
}
ul li:hover{
border-bottom: 2px solid red;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
a {
display: inline-block;
position: relative;
text-decoration: none;
text-align: center;
}
a:hover:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
box-shadow: inset 0 -10px 0 #11c0e5;
}
a span {
display: block;
width: 100px;
height: 40px;
background-color: red;
padding-top: 20px;
}
<a href="#">
<span>link texts</span>
</a>
Related
Is there any possibility to enable the :hover css effect also on the "margin area" of an object? I found a dirty solution working with an extra div inside, but is there something more elegant for this simple structure:
<ul>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
</ul>
CSS
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
margin: 5px 100px;
background-color: #f1f1f1;
}
li:hover a {
color: red;
}
#dirty {
padding: 0px 100px;
margin: 0px -100px;
}
Hey is my working dirty example: https://jsfiddle.net/equalsound/wn4ctxvh/
If possible, a css only solution would be lovely.
As asked in the comments to your question, here is a working answer, using pseudo-elements to fill the 100px side margin:
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
position: relative;
margin: 5px 100px;
background-color: #f1f1f1;
}
li::before,
li::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
li::before {
right: 100%;
}
li::after {
left: 100%;
}
li:hover a {
color: red;
}
<ul>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
</ul>
Just for fun, an alternative using transparent borders that's a little less practical due to the use of background-clip: padding:
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
margin: 5px 100px 5px 0;
border-left: 100px solid transparent;
background-clip: padding-box;
background-color: #f1f1f1;
}
li:hover a {
color: red;
}
<ul>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
</ul>
Although, you can obviate the need for that if you can afford to make the a elements blocks and apply the background color to them instead:
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
margin: 5px 100px 5px 0;
border-left: 100px solid transparent;
}
li a {
display: block;
background-color: #f1f1f1;
}
li:hover a {
color: red;
}
<ul>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
</ul>
Not sure if that is what you are aiming for, but maybe it could help:
https://jsfiddle.net/wn4ctxvh/2/
<ul>
<li>
<div>
<a>Hello</a>
</div>
</li>
<li>
<div>
<a>Hello</a>
</div>
</li>
</ul>
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li div {
margin: 5px 100px;
background-color: #f1f1f1;
}
li:hover a {
color: red;
}
I am trying to make a dropdown-menu. So for this purpose, I've created a div and some anchor links inside, but the display: block; is not working. The cursor is default & the anchor does not seem to be a link.
Here is my HTML:
<div id="custom-wrapper">
<ul>
<li>View full profile</li>
<li>Logout</li>
</ul>
</div>
The CSS:
div#custom-wrapper
{
width: 200px;
height: auto;
position: fixed;
right: 15px;
top: 38px;
border-radius: 6px;
background: #fff;
border: 1px solid lightgrey;
}
div#custom-wrapper ul
{
list-style-type: none;
}
div#custom-wrapper ul li
{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
div#custom-wrapper ul li a
{
text-decoration: none;
display: block;
color: grey;
font-family: sans-serif;
border-bottom: 1px solid lightgrey;
}
What's wrong with my code?
Display block element works perfect, Just you need to remove padding and margin for ul element.
/*** Default CSS Attributes ***/
#custom-wrapper ul {
margin: 0;
padding: 0;
}
/*** Overwrite CSS Attributes ***/
#custom-wrapper ul {
margin: 0 !important;
padding: 0 !important;
}
div#custom-wrapper {
width: 200px;
height: auto;
position: fixed;
right: 15px;
top: 38px;
border-radius: 6px;
background: #fff;
border: 1px solid lightgrey;
}
div#custom-wrapper ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div#custom-wrapper ul li {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
}
div#custom-wrapper ul li a {
text-decoration: none;
display: block;
color: grey;
font-family: sans-serif;
border-bottom: 1px solid lightgrey;
}
<div id="custom-wrapper">
<ul>
<li>View full profile</li>
<li>Logout</li>
</ul>
</div>
There is a padding for ul. Remove it:
div#custom-wrapper ul
{
list-style-type: none;
padding:0;
}
That is not the right way to build a dropdown. Check this (you would need to include Bootstrap library though, which by the way may make your life much easier).
I have the following code:
/**** DropDown Css ******/
.inner_menu ul#nav > li span {
display: inline-block;
height: 15px;
vertical-align: middle;
width: 20px;
background: url(../images/drp_arw_dwn.png) no-repeat center;
margin-left: 10px;
}
.inner_menu ul#nav > li:hover span {
background: url(../images/drp_arw.png) no-repeat center;
}
.inner_menu ul#nav > li:hover .subnav {
display: block;
}
.subnav {
position: absolute;
padding-top: 18px;
display: none;
left: 50%;
margin-left: -100px;
border-style: solid;
border-width: 5px;
border-color:#2c91da
}
.subnav ul {
background: #333;
width: 200px;
padding-top: 15px;
}
.subnav ul li {
display: block;
margin: 0;
padding: 0 0 0 20px;
}
.subnav ul li a {
color: #fff;
font-size: 18px;
padding-bottom: 5px;
}
.subnav ul li:hover a {
color: #2c91da;
display: block;
}
/****************** Nav Menu *****************/
.header .wrapper:after {
opacity: 0.5;
}
.dashboard_page {
position: relative;
background: #fff;
padding: 42px 0;
}
.dashboard_page .wrapper {
position: relative;
z-index: 9;
}
.dashboard_page:after {
left: 0;
top: 0;
width: 100%;
height: 370px;
position: absolute;
content: "";
background: #f7f8f9;
pointer-events: none;
}
.inner_menu {
margin: 7px 0 0 0;
padding: 0;
display: block;
}
.inner_menu ul#nav {
margin: 0;
padding: 0;
display: inline-block;
border-right: 1px solid #f2f2f2;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
}
.inner_menu ul#nav > li {
margin: 0;
padding: 0;
height: 52px;
line-height: 52px;
display: block;
float: left;
border-left: 1px solid #f2f2f2;
position: relative;
}
.inner_menu ul#nav > li > a {
display: block;
color: #2f2f2f;
font-size: 18px;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0 27px;
border-style: solid;
border-width: 5px;
}
.inner_menu ul#nav > li:after {
position: absolute;
width: 38px;
left: 50%;
margin-left: -19px;
content: "";
background: url(../images/menu_arw.png) no-repeat;
height: 20px;
bottom: -35px;
z-index: 9;
display: none;
}
.inner_menu ul#nav > li:hover:after {
display: block;
}
.inner_menu ul#nav > li.active:after {
display: block;
}
<div class="inner_menu">
<div class="toggle"></div>
<ul id="nav">
<li>
Link 1
</li>
<li>
Trackers
<div class="subnav">
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
</ul>
</div>
</li>
</ul>
</div>
The problem is that in internet explorer, when I try to move my cursor below the element to click on the dropdown, it disappears and I am unable to click it.
What am I doing wrong?
The problem was this CSS item:
.header .wrapper:after{ position:absolute; bottom:-33px; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
The attribute bottom should be a higher negative number. -150px worked for me. I changed it to this:
.header .wrapper:after{ position:absolute;
bottom:-150px
; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
Let's break it down:
You hover over '.inner_menu ul#nav > li:hover'
The 'display' is set to 'block' for '.subnav'.
You move your mouse until it moves outside of the actual link (The one that says "Trackers")
The selector '.inner_menu ul#nav > li:hover' no longer applies, since you are no longer hovering over the link.
The background is unset.
If you move the .subnav close to the link (No spaces!) it should work better.
Here is a link to a navigation bar that uses CSS only: http://www.cssnewbie.com/easy-css-dropdown-menus/
You might want to use JavaScript for more advanced functionality.
Some limitations for CSS:
No spaces, if you sub-menu is not RIGHT next to the link to it, it probably won't work (Or would at least be very hard to implement)
No advanced fading, clicking or other events, just hovering.
I'm trying to create menus for a webpage using HTML and CSS. When the menus are displayed those nasty bullets appear. I don't want them. How do I get rid of them?
Also, the submenus need to allow for variable length strings. I had to specify a width: 80px; property for the .dropdown li element. If I didn't, all the menus got squished together.
For the submenus, if I have a lengthy li like this:
<li>Most Popular Artists</li>
All that gets displayed is the word "Most".
So I need two things solved: Get rid of the bullets, and make the submenus handle variable length strings.
HTML:
<nav id="top_menu">
<img src="media/images/logo_large.jpg">
<ul class="dropdown">
<li class="dropdown_trigger">
NEWS
<ul>
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
<li>
<li class="dropdown_trigger">
SOCIAL
<ul>
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
</ul>
</nav>
CSS:
#top_menu{
position: relative;
top:35px;
left: 90px;
width:660px;
height:55px;
background-color: black;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.dropdown {
background: black;
border: 1px solid black;
float: right;
padding: 1px 0 0 1px;
margin: 0 0 20px;
line-height: 55px;
}
.dropdown a {
background: black repeat-x;
border: 1px solid black;
border-top-width: 0;
color: white;
display: block;
line-height: 25px;
overflow: hidden;
text-decoration: none;
height: 25px;
}
.dropdown a:hover {
color: #30B3FF;
background: #666;
}
.dropdown ul a {
background: black;
}
.dropdown > li {
list-style: none;
position: relative;
text-align: left;
font: bold 12px Tahoma;
*display: inline-block;
width: 80px;
/* IE7 hack to make inline-block work right */
*zoom: 1;
display: inline;
}
.dropdown li.dropdown_trigger {
display: inline;
float: left;
margin: 0 0 0 -1px;
}
.dropdown ul {
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
.dropdown ul {
display: none;
}
.dropdown li.dropdown_trigger:hover ul {
display: block;
}
You should add list-style-type: none; to your main ul CSS like so:
.dropdown ul {
list-style-type: none;
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
.dropdown ul {
display: none;
}
And looking at that you can consolidate those two items & format them for readability as well:
.dropdown ul {
display: none;
list-style-type: none;
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
And past that you can even add the !important to force an override:
.dropdown ul {
display: none;
list-style-type: none !important;
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
Add list-style:none; to your unordered (bulleted) list to hide the default bullets. Apply this role to ul in this way you will not have to apply it to each ul.class every time.
ul {
list-style:none;
padding:0;
margin:0;
}
Check out the JSfiddle showing what I am up to: http://jsfiddle.net/Amp3rsand/FPj3s/1/
HTML:
<ul id="navigation">
<li>BLAH</li>
<li>MORE <br /> BLAH</li>
<li>STILL <br /> MORE</li>
<li>YADDA <br /> YADDA</li>
<li>ETC ETC <br /> ETC ETC</li>
<li>FINISH</li>
</ul>
CSS:
body {
font-size: 12px;}
}
#navigation {
width: 600px;
height: 50px;
position: absolute;
left: 20px;
top: 25px;
}
#navigation li {
list-style-type:none;
width: 94px;
height: 40px;
display: block;
float: left;
margin: 0 5px 0 0;
text-align: center;
font-weight: bold;
background: lightgrey;
}
#navigation li:first-child {
border-top: 40px solid lightgrey;
border-left: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:first-child a {
position: relative;
top: -35px;
right: 0px
}
#navigation li:last-child {
border-top: 40px solid lightgrey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:last-child a {
position: relative;
top: -35px;
left: 5px;
}
#navigation li:last-child a:hover {
top: -35px;
left: 5px;
}
#navigation li a {
display: block;
height: 40px;
text-decoration: none;
color:#000;
}
#navigation li a:hover {
background: grey;
}
The lightgrey shapes are what I would like the hover to look like. Only the first and last children need to look different but I am unsure of how to go about messing with the borders on hover without ruining the layout. I have had to move the first and last 'a' elements because of the border shenanigans and now I'm stuck.
What would you suggest?
EDIT:
I just realised I could do this to change the shape of the hover bit but the link position is still causing trouble
#navigation li:last-child a:hover {
border-top: 40px solid grey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
See it live here on JS Fiddle
The properties you want to change are of the <li> elements so target the list items hover state and change the background and border color
#navigation li:hover {
background: grey;
}
#navigation li:first-child:hover,
#navigation li:last-child:hover{
background: none;
border-top-color: grey;
}
Updated fiddle
Essentially, you want to set the 'border-top' to grey for the first/ last child.
You could use in CSS:
#navigation li:first-child:hover {
border-top: 40px solid lightgrey;
}
But this didn't work in Google Chrome, for me, so perhaps just apply that as a hover effect using jQuery?