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
Related
Hey I can't understand if there is any easy way to solve this:
I want the black border to be on top of the blue border not extend the height of the navigation.
I've looked at inset and adding bottom in the a but I want to override the one from .navigationbar
HTML
<nav class="navigationbar">
<ul>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
</nav>
CSS
* {
margin: 0;
}
.navigationbar {
background-color: #000000;
width: 100%;
border-bottom: .1em solid #0000FF;
}
.navigationbar ul {
list-style-type: none;
overflow: hidden;
}
.navigationbar ul li {
float: left;
color: #FFFFFF;
}
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
.navigationbar ul li a:hover {
background: #0000FF;
color: #FFFFFF;
border-bottom: .1em solid #000000;
}
.navigationbar img {
float: left;
}
https://jsfiddle.net/55r2e9bq/
Why not just set the border and change its color later?
.navigationbar ul li a
{
border-bottom: .1em solid transparent;
}
.navigationbar ul li a:hover
{
border-bottom-color: #000000;
}
The border you are seeing comes from the rule .navigationbar ul li a:hover{...} where you have border-bottom: .1em solid #000000;. It is not extending to 100% of width of the navigation bar, but is causing it becomes higher.
If you want the navigationbarstays of the same height you should assign the border also to the normal state of the a element then you can change its color to whatever you want.
This way:
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}
You can add border-bottom: 0.1em solid #000000; to .navigationbar ul li a to avoid that movement/height increase:
https://jsfiddle.net/p7L7adhe/1/
I am trying to style a navigation menu i created using some css. I want the menu background colour to change when the use hovers over the menu item.
The menu is called 'side-bar-menu'
The difficulty I am having is making the background colour fill the menu item when hovered.The background colour of the link changes, but i doesn't fill the actual menu item. I've tried padding, which sort of works but it doesn't correctly fill the menu item.... help
This is my css so far:-
/* The SideBar menu styling*/
#menu-side-bar-menu li {
list-style-type: none;
border-bottom: 1px solid #D6D6D6;
background-color: #f2f1f1;
margin: 0px 0px 0px 20px;
padding: 5px 10px 5px 10px;
}
#menu-side-bar-menu a {
color: #BA9E2F;
}
#menu-side-bar-menu li a:hover {
background: #BA9E2F !important;
color: #fff;
padding-top:8px;
padding-bottom:9px;
}
This is a link to the page I'm trying to style. Its the menu down the left of the page
3 things to do:
1.) remove the padding from #menu-side-bar-menu li completely
2.) Add the padding you had for li to #menu-side-bar-menu a and also add display: block to it to have li fully filled by a
3.) Remove the padding from the #menu-side-bar-menu li a:hover rule to avoid a change in size when hovering.
This results in the following CSS:
#menu-side-bar-menu li {
list-style-type: none;
border-bottom: 1px solid #D6D6D6;
background-color: #f2f1f1;
margin: 0px 0px 0px 20px;
}
#menu-side-bar-menu a {
display: block;
color: #BA9E2F;
padding: 5px 10px 5px 10px;
}
#menu-side-bar-menu li a:hover {
background: #BA9E2F !important;
color: #fff;
}
Please try this:
.sub-menu li {
margin: 0;
width: 100%;
}
.sub-menu li a {
width: 100%;
padding-left: 40px;
}
It worked in the inspector.
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
http://jsfiddle.net/zcfqu/
Been playing around with this piece of code for a while and am confused a bit.
How do I:
Change the color of the each submenu?
Make the submenu the same width as the main button?
HTML
<ul id="menu">
<li>This is the button
<ul class="submenu">
<li>Button one
</li>
<li>Button two
</li>
<li>Button three
</li>
</ul>
</li>
</ul>
Remove all floats and position:absolute
Check this demo
I just removed all floats (which was causing funny jumping of li and really not needed) and position:absolute (which was causing menu to shift sideways)
Also, I didn't read through all your CSS to find which background property is overriding which one, but I just removed them all and added new ones at bottom.
#menu > li { background-color: red; }
#menu > li:hover { background-color: green; }
.submenu li { background-color: blue; }
.submenu li:hover { background-color: yellow; }
EDIT 1
Its a good idea to use CSS shorthands and reduce CSS size and also make it more readable. Also, remove all incorrect CSS and you can also write border-radius: 2px 2px 2px 2px as border-radius: 2px (and save 12 bytes :O)
EDIT 2
CSS shorthands - MDN
font shorthand - W3C
background shorthand - W3C (scroll to the very bottomo of the page)
Change the color of the each submenu
ul.submenu a:hover {
background-color: red !important;
}
This changes on hover. If you want it always the same color remove :hover
Make the submenu the same width as the main button
ul.submenu, ul.submenu>li {
width: 100%;
}
This way you don't need to apply a fixed width. The browser will calculate it using parents adapted width.
Demo
Here is the correct approach in tackling your issues
DEMO http://jsfiddle.net/kevinPHPkevin/zcfqu/37/
// be more specific when targeting
ul#menu ul.submenu li a:hover {
background-color: green;
}
// set width to match button size
ul.submenu, ul.submenu>li {
width: 100%;
}
// assign classes for different coloured buttons. You could do this with css3 and `nth child` but it would limit your browser support considerably.
ul#menu .submenu li.btn1 a {
background: red;
}
ul#menu .submenu li.btn2 a {
background: yellow;
}
ul#menu .submenu li.btn3 a {
background: blue;
}
Take a look to this, I changed the background, and the "hover" and the width. It is correct ? Fiddle
ul#menu, ul#menu ul.sub-menu and ul#menu, ul.submenu --> width: 200px;
ul#menu li a for the background
I've set each li as 150px width. This has fixed the issue.
http://jsfiddle.net/andaywells/zcfqu/34/
ul#menu ul.submenu li {width: 150px;}
You can try the css as below with no changes on the html elements. I have added some comments for your references. Only 3 changes made on the css.
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
font-family: Helvetica;
background-color: #57AD68;
color: #FFFFFF;
border-radius: 3px 3px 3px 3px;
font-size: 12px;
font-style: normal;
font-weight: 400;
height: 40px;
line-height: 39px;
padding: 0 20px;
position: relative;
text-align: center;
vertical-align: bottom;
border-radius: 3px 3px 3px 3px;
border-style: none none solid;
border-width: 0 0 1px;
cursor: pointer;
display: inline-block;
float: center;
list-style-type: none;
text-decoration: none;
}
ul#menu, ul.submenu{
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 134px; /*Adjust the sub menu width*/
}
ul#menu li{
float: left;
}
/* hide the submenu */
li ul.submenu {
display: none;
}
/* Main Button */
ul#menu li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 0 20px;
background: ; /*Remove the color here to avoid overlapped*/
float:right;
border-radius: 2px 2px 2px 2px;
font-family: Helvetica;
}
ul.submenu a:hover {
background: red;
}
/* show the submenu */
ul#menu li:hover ul.submenu{
display: block;
position: absolute;
float:right;
background-color:green; /*Adjust the color of sub menu.*/
}
ul#menu li:hover li, ul#menu li:hover a {
float: none;
background: ;
}
ul#menu li:hover li a:hover {
opacity:0.9;
}
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;
}