I have a list , then I set its css to :
.dropdown-menu > li {
list-style: none outside none;
height: 22px;
border-bottom: 1px dotted #e1e1e1;
width: 178px;
margin-left: 10px;
}
Then when mouse hover :
.dropdown-menu > li > a:hover{
color: #EC5B00 !important;
z-index: 3;
border-style: solid;
border-color:#dddddd #ffffff #dddddd #dddddd;
border-width: 1px 3px 1px 0px;
width: 183px;
background-color: #ffffff;
margin-left: 1px;
}
Problem :
Even I set the border to solid style, but the dotted still exists, so there're two lines (one is a dotted, and another one is solid). How to omit the dotted one on mouse hover by css?
Any help would be much appreciated, thank you..
Update :
After changing the style by all the answers, then I found one problem, one more dotted border is getting from the other li next to the current hover li, here it is : http://jsfiddle.net/gbw3fj14/
The border-bottom: 1px dotted #e1e1e1; style is set to li, you are changing the a border later, try to change your selector from li > a:hover to li:hover
.dropdown-menu > li {
list-style: none outside none;
height: 22px;
border-bottom: 1px dotted #e1e1e1;
width: 178px;
margin-left: 10px;
}
.dropdown-menu > li:hover {
color: #EC5B00 !important;
z-index: 3;
border-style: solid;
border-color:#dddddd #ffffff #dddddd #dddddd;
border-width: 1px 3px 1px 0px;
width: 183px;
background-color: #ffffff;
margin-left: 1px;
}
jsFiddle Demo.
http://jsfiddle.net/
your wrote wrong
.dropdown-menu > li > a:hover to .dropdown-menu > li:hover
Related
I am using the selectors first-child and last-child to apply rounded corners to an unordered list.
The problem I am encountering is that the right hand border of the last list item is not showing.
I define the borders like so:
border: 1px solid hotpink;
border-right: 0;
Setting the right hand border to 0 to prevent a double bordering, then in the last-child I give the border-right a width of one.
But this is leaving me without a right-hand border on the last child and I am unsure why, as you can see below:
Here's my entire CSS and a JSFiddle:
ul, li {
margin: 0;
padding: 0;
}
.menu {
width: 90%;
margin: 0 auto;
height: 30px;
list-style: none;
}
.menu li {
box-sizing: border-box;
display: inline-block;
border: 1px solid hotpink;
border-right: 0;
padding: 0 0.5em;
}
.menu li:first-child {
border-top-left-radius: 5px;
}
.menu li:last-child {
border-top-right-radius: 5px;
border-right: 1px;
}
http://jsfiddle.net/QFvr6/
Instead of using border-right: 0; you should use border-right-width: 0; and for the :last-child selector, you need to use
.menu li:last-child {
border-top-right-radius: 5px;
border-right-width: 1px;
}
Demo
The issue is that when you use border-right: 0; it will reset the size, type and the color as well, so even if you use border-right-width: 1px; only, it won't work, so you need to use border-right-width: 0; for the .menu li as well.
Your rule is not complete : border-right: solid 1px; or it should be border-right-width:1px;
DEMO
Fixed, you forgot you specified border-right cannot have border:
.menu li:last-child {
border-top-right-radius: 5px;
border-right: 1px solid #FF69B4;
}
live link here
http://soloveich.com/pr1-1/
Trying put a border (and later arrow in the middle) on hover in menu.
But with this code, it puts a border over entire menu, and individual li on top of that.
#menu ul li {
margin-top: -50px;
padding-top: 50px;
float: right;
margin-right: 30px;
display: inline-block;
}
#menu li:hover {
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
}
a:hover does the trick, but i couldn't figure out a way to put the border way on top, and I'm expecting problem putting the arrow caret there, as well
Thanks
Try:
.menu-menu-1-container li:hover {
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
}
Or:
#menu li li:hover {
border-top-style: solid;
border-top-color: red;
border-top-width: 3px;
}
How do I add a rule above and below my nav bar? I tried an HR tag, but that seemed to make a lot of space around the nav bar. Here is my html and here is the example of how I want to do it.
http://matthewtbrown.com/jeffandcricketquilt/
http://matthewtbrown.com/jeffandcricketquilt/rule.png
If you do not want to change your html at all, you can add this to your css
nav ul:before {
border-bottom: 1px solid white;
border-top: 1px solid white;
bottom: 5px;
content: "";
left: 5px;
position: absolute;
right: 5px;
top: 5px;
z-index:0;
}
nav ul {
overflow: auto;
position: relative;
background-color:#000;
}
nav ul li{
position:relative;
z-index:10;
}
and remove the background-color from the li elements (since i added it to the ul)
Use borders and padding:
* {
margin: 0;
padding: 0;
}
nav {
text-align: center;
background: black;
color: white;
padding: .2em;
}
ul {
padding: .5em;
border: 1px solid white;
border-left: none;
border-right: none;
}
nav li {
display: inline;
list-style-type: none;
padding: 0 2em;
}
Demo
I would apply an outline to the ul tag, so the css should be:
nav ul{
outline-color: white;
outline-style: solid;
outline-width: 2px;
outline-offset: -7px;
height: 60px;
width: 848px;
}
Try applying this CSS to the nav bar:
border-top: 1px solid #eee
border-bottom: 1px solid #eee
The easiest is to add a padding to the nav element, 4px makes good with width of li elements. Also add float: left
Now add border-top and border-bottom to the ul element. Add float: left here as well. This will switch your li element around as they have a fixed width. lower the width of them to 210px and things should be fine.
CSS additions to your code:
nav {
padding: 4px
float: left;
}
nav ul {
border-top: 1px solid white;
border-bottom: 1px solid white;
float: left;
}
nav li {
width: 210px;
}
If line-height is the same as font-size you can manipulate border distance by changing padding-bottom of list element, here is my example:
.headerSection ul.navigation li a {
font-size: 12px;
line-height: 12px;
text-decoration: none ;
padding-bottom: 10px;
border-bottom-color: transparent;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.headerSection ul.navigation li a:hover {
border-bottom-color: #e8bf5d;
}
1: http://i.stenter code
i want to remove left side of user group tab sharp sized border. i want to remove that small gap of white in left side of user group tab
This is the css applied for selected tab.
ul.tabs li.selected a {-moz-border-bottom-colors: none;-moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 white; border-color: #B7B7B7 #B7B7B7 White; border-image: none;
border-style: solid; border-width: 1px; font-weight: bold;
position: relative; top: 0;}
ul.tabs li a {-moz-border-bottom-colors: none; -moz-border-left-colors: none;
-moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #D8DAE2; border-color: #CCCCCC #CCCCCC #B7B7B7; border-image: none;
border-style: solid; border-width: 1px; color: Black; font: 11px verdana,helvetica,sans-serif;enter code here outline: medium none; padding: 5px 16px;
position: relative; text-decoration: none; z-index: 1;}
Make a change to your css:-
ul.tabs li.selected a {
top:1px; //change
}
if you are using jquery ui, the margin right is on the li element, not on a.
So your code should look like:
ul.tabs li { margin-right:0 }
if still not working, add
ul.tabs li { margin-right:0 !Important; }
At this Test Link I seek to install header and main site navigation on to the top of a blog script. The drop down menu has wide gaps appearing between each of the page links! This does not render like this on the main site which has the same code! What is required to close the gaps?
The dropnav styling is like this:
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
you have li padding bottom and li padding top try to removing them (or remove one of them and decrease padding for one of them) and also you have same class dropnav for the div and also the ol try changing one of them to a different class and remove border-style: solid; this should fix your issue.
On line 169 of site_template.css, you have this rule:
li {
padding-bottom: 2px;
padding-top: 2px;
}
You either need to remove this, or override it using something like:
.dropnav li { padding: 0px; }
Remove the padding on li on line 167 of style_template.css