How can I remove the white border under the tag from this drop down menu? I only want it to appear when the drop down item is hovered.
Please see for the website. www.velnikolic.com/music Need to type more for limit to go down.
Current CSS
/* Navigation --------------------------------------- */
.main-menu li {
display: block;
font-weight: 10000;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
text-align:center;
padding:15px 70px;
margin-bottom:1px;
}
.main-menu li:hover {
display: block;
background:black;
color:white;
}
.main-menu li:hover a{
color:white;
border-bottom: 2px solid white;
}
ul.main-menu a {
margin-left: 0px;
text-align: center;
}
.main-menu > li:first-child { margin-top: 0; }
.main-menu ul { margin-left: 20px; }
.main-menu a { color: #999;
text-align:center;
}
.main-menu li a:hover,.main-menu li a:focus {
color:white;
}
.main-menu .current-menu-item > a,
.main-menu .current_page_item > a { color: white; }
li.current-menu-item{
background:black;
color:white;
}
.main-menu .current-menu-item:before,
.main-menu .current_page_item:before {
/*content: '\f405';
display: block;
font: 16px/1 "Genericons";
color: #019EBD;
position: absolute;
top: -1px;
left: -20px;*/
}
/* -------------------------------------------------------------------------------- */
/* User-Added-1. Drop Down Menu
/* -------------------------------------------------------------------------------- */
ul.sub-menu{
display: none;
}
li:hover .sub-menu {
background: #34495e;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 180px;
top: -1px;
}
you must be talking about text decoration property
try this :
text-decoration:none;
possible values are:
none
underline
overline
line-through
This should work:
ul.main-menu a
{
border-bottom: 0;
}
ul.main-menu a
{
border-bottom: 2px solid white;
}
EDIT: Try
Changing .main-menu li:hover a to .main-menu li:hover > a
and add the following:
.main-menu li:hover a
{
color: white;
}
Related
I'm having issues centering the Navigation bar of my Drop Down menu (See Code Below). To specify what I mean I'll leave an image here aswell.
As you can see the middle and bottom Navigation bars aren't centered, and when I attempt to center them, they stack on top of each other in the middle of the screen instead of just centering the line. All of the HTML for the Navigation bar is the same, so I've left the first section for it in the code. Any help is appreciated.
/*CSS*/
#menu {
z-index: 1;
clear: both;
margin: 0;
padding: 0 40px 0 0;
font: bold 15px/26px Avenir;
height: 2em;
}
#menu ul {
float: left;
list-style: none;
margin:0;
padding: 0;
}
#menu li {
display: inline;
list-style: none;
position: relative;
float: left;
}
#menu li a {
display: block;
float: left;
padding: 0 0.5em;
text-decoration: none;
color: #000;
}
#menu li.current_page_item a {
background-color: #FFF;
color: #333;
}
#menu li.current_page_item ul li a {
background-color: transparent;
color: #333;
width: 9em;
}
#menu li:hover {
background: #ECECEC;
}
#menu li a:hover {
color: #333;
}
#menu>ul a {
width: auto;
}
#menu ul ul {
position: absolute;
display: none;
}
#menu ul ul li {
border-bottom: 1px solid #CCC;
width: 9em;
}
#menu ul li:hover ul {
display:block;
background-color: #AAA;
width: 9em;
}
#menu ul ul li:hover ul {
display:block;
background-color: #555;
}
#menu ul ul {
top: 2em; left: 0em;
}
#menu ul ul ul {
top: 0em; left: 9em;
border-top: 0.1em solid #CCC;
}
/*HTML*/
<div id="menu">
<ul>
<li>Alternative & Natural Building <ul>
<li>Earthbag</li>
<li>Strawbale</li>
<li>Tiny Houses</li>
<li>Underground Houses</li>
<li>Yurts</li>
</ul></li>
Hi I am having trouble shifting a menu list on my wordpress site to the left. It appears as if there is a margin so when the list contains so many items it appears right offset and no longer centred. The site in question is www.cabinboys.ca the menu I'm talking about is right below the cabinboys image filled with two letter items. If any one could look at my css and see if they could figure out how to shift the list items to the left that would be much appreciated thanks.
/* =Menu
----------------------------------------------- */
#menu {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
margin-bottom: 25px;
padding: 10px;
text-align: right;
width: 800px;
}
#menu img {
margin-bottom: 10px;
}
#menu a {
color: #666;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 0 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu a:hover {
color: #36bcab;
}
#menu ul {
list-style: none;
margin: 0;
padding-left: 30;
}
#menu li {
float: right;
position: relative;
}
#menu ul ul {
display: none;
float: right;
position: absolute;
right: 0;
z-index: 99999;
}
#menu ul ul ul {
right: 100%;
top: 0;
}
#menu ul ul a {
background: #e9e9e9;
border-bottom: 1px solid #e1e1e1;
display: block;
font-size: 14px;
height: auto;
line-height: 1em;
margin: 0 ;
padding: .8em .5em .8em 1em;
width: 130px;
}
#menu ul ul li:last-of-type a {
border-bottom: none;
}
#menu li:hover > a,
#menu ul ul :hover > a {
color: #36bcab;
}
#menu ul ul a:hover {
background: #36bcab;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul li.current_page_item > a,
#menu ul li.current_page_ancestor > a,
#menu ul li.current-menu-item > a {
color: #111;
}
#menu ul:after {
clear: both;
content: ' ';
display: block;
}
You should add a couple of properties to make it work:
#menu-header-menu {
display:table;
margin:0 auto;
padding:0;
}
Nevertheless it's interesting that you say that the shift happened when the number if items in the menu increased, I don't see in the CSS any code that could differentiate the display depending on the number of items. Could you confirm that I understood the situation?
I am trying to make this menu item work but every time I use it, the sub menu hides. Please guide me. Thanks.
EDIT: It is the same issue as this:
CSS Space between menu and submenu
website: http://www.inspuratesystems.com/mntextile
JS Fiddle
#navmenu {
padding-top:30px;
}
.nav-header {
margin: auto;
padding: 0;
display: block;
}
#navmenu ul {
margin: 0px;
padding: 0px;
padding-left: 5px;
}
#navmenu ul li {
list-style-type: none;
display: inline-block;
position: relative;
margin-top: 0px;
padding-top: 15px;
/*
height:60px;
*/
padding-left:10px;
padding-right:10px;
}
#navmenu li a {
font-size: 13px;
color: #FFFFFF;
font-weight: 500;
font-family: 'Raleway', sans-serif;
}
#navmenu li a:hover {
font-size: 13px;
color: #f28c18;
font-weight: 500;
}
#navmenu li a:active {
color: #f28c18;
}
/* Effect 1: Brackets */
#navmenu ul {
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
margin-top: 5px;
}
#navmenu ul > li::before {
position: absolute;
bottom:65%;
left: 50%;
color: transparent;
/* Removing the balls
content: '•';
*/
/*
text-shadow: 0 0 transparent;
*/
font-size: 1.2em;
-webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
pointer-events: none;
margin-left: 5px;
background:#051449;;
}
#navmenu ul > li:hover::before,
#navmenu ul > li:focus::before {
color: #fff;
text-shadow: 10px 0 #fff, -10px 0 #fff;
}
#navmenu ul > li:hover,
#navmenu ul > li:focus {
color: #FFF;
}
#navmenu ul >li ul li::before{ display:none;}
#menu-icon {
display: none;
}
/*SUBMENU*/
#navmenu ul li ul {
position:absolute;width:140px; z-index:999999; padding-left:0; margin-left:0px; display:none;left: 10px; opacity: 0.9;}
/* old= width:120px; */
#navmenu ul li ul li {
float:none; margin:0; text-align:left; background:#FFFFFF ;
padding-right:10px;
padding-left:10px;
padding-top:-10px;
/*
padding:10px 10px;
*/
/*
padding-top:5px;
*/
display:block; border-bottom: 1px solid #333; height:auto; }
#navmenu ul li ul li:hover {
background-color: #0099CC;
}
#navmenu ul > li ul li:hover {
color: white; /* Old browsers */
background-color: #0099CC ;
}
#navmenu ul li ul li a
{ width:100%; margin:0px; display:block; color: #FFFFFF;
}
#navmenu ul li ul li a:hover
{ width:100%; margin:0px; display:block; color: #FFFFFF;
}
#navmenu ul li ul li ul {
left: 100%;
/* sub menus of sub menu's same
margin-top: -32px;
*/
margin-top: -27px;
float: none;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCC;
}
#media only screen and (max-width: 768px) {
/*MENU*/
body #menu_wrap {
width: 100%;
}
body #navmenu {
width: 100%;
text-align: center;
}
#navmenu ul li {
list-style-type: none;
display: inline-block;
position: relative;
margin-top: 0px;
padding-top: 15px;
height: auto;
padding-left:10px;
padding-right:10px;
background-color:#051449;
}
/* nav-wrap */
#menu_wrap {
position: relative;
}
/* menu icon */
#menu-icon {
padding: 10px 0px;
cursor: pointer;
font-size: 20px;
display: block!important; /* show menu icon */
}
#menu-icon:hover {
}
/* main nav */
body #navmenu ul.menu {
clear: both;
position: absolute;
top: 50px;
width: 100%;
z-index: 10000;
/*
border: solid 1px #999;
*/
display: none;
margin-top: 5px;
/*
background-color: rgb(51,51,51);
*/
background-color:#051449;
}
body #navmenu ul.menu li {
width: 100%;
clear: both;
float: none;
text-align: center;
padding-top: 6px;
padding-right: 30px;
padding-bottom: 6px;
padding-left: 0px;
/*
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
*/
}
body #navmenu ul > li:hover {
background: #051449 !important;
}
body #navmenu ul.menu li ul li {
background:#051449!important;
width: 100%;
border: none;
}
body #navmenu ul.menu li ul li:hover {
background:#051449!important;
}
body #navmenu ul.menu a, body #topmenu ul.menu ul a {
background: #051449!important;
display: inline;
padding: 0;
border: none;
}
body #navmenu ul.menu a:hover, body #topmenu ul.menu ul a:hover {
background: #051449!important;
}
/* dropdown */
body #navmenu ul.menu ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
margin-top: 0px;
}
body #navmenu ul.menu ul li {
}
}
Add in the css:
#navmenu ul li ul {
margin-top: 0;
}
So the space between the elements is removed.
You can use it -
Demo
nav ul li {
float: left;
position:relative
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
margin-top:5px;
}
I did the job by make the submenu functioning, the problem is I can't get the submenu width wider than its parent.
when i hover, its messed up as you can see in fiddle links i provided below
please take a look at this http://jsfiddle.net/wR5L5/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
padding: 0;
}
.navigation ul li {
position: relative;
display: inline;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
there is a flexible menu .sub class http://jsfiddle.net/wR5L5/12/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
position: relative;
padding: 0;
}
.navigation ul li {
display: inline;
position: relative;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
float: left;
width: auto;
min-width: 100%;
background: #999;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
white-space: nowrap;
clear: both;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
display: block;
float: none;
width: 100%;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
Give width to the sub menu to get submenu wider than main menu.
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
width: 150px;
font-size: 13px;
}
I have got a task to do horizontal menu. While creating the menu i got a problem with the style.When we are hovering the menu it is jumping and also the sub child menu is comes at different position depending on the size of the text. My css file is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#menu, #menu ul {
list-style: none;
//padding: 2px;
}
#nav{
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav > ul > li:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
.menu-child {
width:160px;
display:block !important;
}
#nav ul li ul li:hover {
}
#nav ul li ul :hover {
}
#menu {
float: left;
height: 25px;
}
#menu> li {
float: left;
}
#menu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menu ul {
position: absolute;
display: none;
z-index: 999;
}
#menu ul li a {
}
#menu li:hover ul {
display: block;
}
#menu {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8;
}
#menu > li > a {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
color:#787878;
font-weight: bold;
}
#menu > li > a:hover {
color: #000;
}
#menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
background: #E0E0E0;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin:0;
position: absolute !important;
top:0;
right:-87px;
//border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li {
position:relative !important;
}
.child-list li:hover ul {
display: block !important;
}
.child-list li{
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
.child-list ul{
border-top:1px solid #C0C0C0;
border-bottom:5px solid #C0C0C0;
}
.child-list{
border-bottom:5px solid #C0C0C0;
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
You can see my code from http://jsfiddle.net/ucpcA/1/ How can i solve this problem?
Add to css this:
li {border: 1px solid #fff;}
I tried it in fiddle and it solved "jumping"
//Edit
The main idea is to set border to the top li elements so when you add additional border with color it will not jump
//Edit 2 to solve your 2nd problem
To sovle your 2nd prbolem put this line
.subchild-list {
margin:0;
right:-150px;
position: absolute !important;
top:0; }
#menu ul li {width: 150px;}
It is just an example so you will see what it does. Put there the ewidth which you really need.