I know this question has been asked similar ways before, but I am not finding a solution. I am trying to get the submenu dropdown to appear when one hovers over the main navigation.
It is a standard wordpress nav menu that worked fine until a few days ago. .
The site is http://www.cktax.com/.
header nav .sub-menu a:hover{
color: #555;
}
header .sub-menu li:hover {
background:#eee;
border-radius:4px;
box-shadow:inset 0 0 2px #CCC;
}
nav > ul ul {
display:none;
}
.submenu {
overflow:hidden;
font-size:13px;
height:14px;
}
.submenu ul {
padding-bottom:1px;
}
.submenu strong {
float:left;
}
.submenu li {
float:left;
line-height:1em;
margin:0 16px;
}
header .sub-menu {
position:absolute;
background-color:#FFF;
z-index:2;
left:-12px;
top:40px;
width:220px;
box-shadow:0 0 3px #c3c3c3;
border-radius:8px;
padding:20px;
}
header .sub-menu a {
font-size:14px;
letter-spacing: .5pt;
display:inline-block;
width:100%;
padding:9px 10px;
}
header .sub-menu .sub-menu {
left:231px;
top:0;
}
header .sub-menu .sub-menu:before {
content:'';
}
header .sub-menu li {
position:relative;
margin:0;
}
Related
I just tried to remove the MagicLine that was built into my Wordpress theme by taking out the CSS code that I'll put below. It worked and the line is gone but now my navigation is all jumpy as you can see at the site: http://sheisbiddy.com/home/ Is there a better way to remove the line (I can't seem to find it in the piles of code that came with the theme) or anyway to get the menu back to normal? Thanks!
#navigation ul li#magic-line { position: absolute; left: 0; width: 100px; height: 4px; padding-left: 0; display: none; }
This is what is left for the navigation CSS:
#header {height: 100px; padding-top: 20px; margin: 0 auto; }
#logo { float:left; }
#logo { text-transform:capitalize; padding:35px 0; }
#logo img { max-width:100%; }
#navigation {float:right; margin-right:20px; }
#navigation ul { list-style:none; position:relative; }
#navigation ul li { float:left; padding-left:30px; font-size:12px; display:inline; position:relative; font-weight:bold; }
#navigation ul li a { color:#888; padding-bottom:10px; padding-top:35px; display:inline; }
#navigation ul li ul { position:absolute; border:1px solid #e9e9e9; display:none; left:15px; padding-bottom:15px; z-index:9999; }
#navigation ul li ul li { min-width:150px; margin-left:15px; margin-right:15px; padding:15px 0 10px 0; border-bottom:1px solid #f6f6f6; font-weight:normal; font-size:10px; }
#navigation ul li ul li:last-child { border:0; padding-bottom:0; }
#navigation ul li ul li a { border:0; display:inline; padding:0; }
#navigation li:hover ul { display:inline; }
#navigation select { display:none; -webkit-appearance: none; border-radius: 0; }
you have an errors in you CSS which causes the navigation to behave this way...
in style.dynamic.php file :
Lines : 94,96,104
#tagline { background-color:; }
#navigation ul li { padding-bottom:px; }
#navigation ul li a { padding-top:px; }
I am trying to make my menu links #666666 and then on hover make it #FFFFFF
i want these colours to change on the text colour and the top border
http://jsfiddle.net/4Xdkn/
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
margin-top:20px;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
border-top:4px solid #666666;
margin-right:20px;
padding-top:20px;
min-width:120px;
}
#menu > li {
display:inline-block;
list-style:none;
margin-top:25px;
margin-left:auto;
margin-right:auto;
}
#menu > li:hover {
color:#FFFFFF;
}
Selectors should be
#menu li a {
color: #666;
display: block;
}
#menu li:hover {
border-top-color: #FFF;
}
#menu li:hover a {
color:#FFFFFF;
}
#menu has no direct li descendants so #menu > li:hover does not match anything.
http://jsfiddle.net/4Xdkn/8/
You have an error in your CSS
#menu > li does not target anything, since #menu is applied to a div and it has no direct children of type li.
Use these rules
#menu li {
display:inline-block;
border-top:4px solid #666666;
margin-right:20px;
padding-top:20px;
min-width:120px;
}
#menu li:hover,
#menu li:hover a {
color:#FFFFFF;
}
#menu li a {
color:#666666;
}
#menu li:hover {
border-color:#FFFFFF;
}
Demo at http://jsfiddle.net/gaby/4Xdkn/4/
Updated Fiddle
You need to add:
#menu li a {
display:block;
padding-top:25px;
border-top:4px solid #666666;
}
#menu
li a:hover {
border-color:red;
color:#fff
}
On #menu > ul > li remove the border-top and padding, because this has been added to the a tag now.
On #menu > li remove the margin-top property
try this
http://jsfiddle.net/4Xdkn/7/
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
margin-top:20px;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
border-top:4px solid #666666;
margin-right:20px;
padding-top:20px;
color:#ffffff;
min-width:120px;
}
#menu > li > a {
display:inline-block;
list-style:none;
margin-top:25px;
margin-left:auto;
margin-right:auto;
text-decoration:none;
color:#ffffff;
text-decoration:none;
}
#menu li:hover {
color:#FFFFFF !important;
text-decoration:none;
border-top:4px solid #ffffff;
display:inline-block;
}
#menu li a:hover{
color:#ffffff;
text-decoration:none;
}
}
Colorize the a-element instead of the li and make the a element as big as the li.
#menu li a:hover {
color:white;
border-style:solid;
border-width: 1px 0px 0px 0px;
border-color:white;
}
Try the below css
#topbar {
width:100%;
height:80px;
background-color:#000000;
}
#topbar-inner {
width:1000px;
margin:0 auto 0 auto;
}
#logo {
display:inline;
float:left;
margin-top:20px;
}
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
margin-right:20px;
min-width:120px;
}
#menu > li {
list-style:none;
padding:25px 0 0 0;
margin-left:auto;
margin-right:auto;
border-top:1px solid #fff;
}
#menu ul li a:hover {
color:#FFFFFF;
}
#menu li a {display:block; padding:20px 0 0 0;border-top:4px solid #666666;}
#menu li a:hover { border-top:4px solid #fff; color:#fff}
I have set up a site with Drupal 7, using the theme called "Professional Theme". I've found problem with text-overlapping on the main menu. There are two rows in my top menu bar. I've found the drop-down menu text has overlapped with the text on the text on the 2nd row of the menu. And I can't click on the links on that drop-down menu as it would simply disappear when I move the cursor downward. May anyone tell me what's wrong with it and how to fix it?
#main-menu {
min-height:35px;
box-shadow:0 0 3px #999;
background:#000033;
background:-moz-repeating-linear-gradient(#666699, #000033 35px);
background:-webkit-repeating-linear-gradient(#666699, #000033 35px);
background:-o-repeating-linear-gradient(#666699, #000033 35px);
background:-ms-repeating-linear-gradient(#666699, #000033 35px);
background:repeating-linear-gradient(#666699, #000033 35px);
}
#main-menu ul {
float:left;
padding:0;
margin:0;
max-width:75%;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
}
#main-menu li {
position:relative;
float:left;
padding:0;
margin:0;
line-height:35px;
z-index:100;
list-style-image:url(none);
}
#main-menu li li{
line-height:13px;
}
#main-menu ul li:first-child {
padding-left:0;
}
#main-menu a {
display:block;
padding:0 20px;
color:#f0f0f0;
text-align:center;
text-decoration:none;
}
#main-menu a:hover,
#main-menu li > a.active {
background:#3366cc;
background:-moz-linear-gradient(#3399ff,#000033);
background:-webkit-linear-gradient(#3399ff,#000033);
background:-o-linear-gradient(#3399ff,#000033);
background:-ms-linear-gradient(#3399ff,#000033);
background:linear-gradient(#3399ff,#000033);
color:#fff;
text-decoration:none;
}
#main-menu li > a.active {
background:#cc66ff;
background:-moz-linear-gradient(#cc66ff,#000033);
background:-webkit-linear-gradient(#cc66ff,#000033);
background:-o-linear-gradient(#cc66ff,#000033);
background:-ms-linear-gradient(#cc66ff,#000033);
background:linear-gradient(#cc66ff,#000033);
}
.drop-down-toggle {
position:absolute;
top:7px;
right:16px;
display:none;
width:20px;
height:20px;
border-radius:15px;
background:#000033;
background:-moz-linear-gradient(#666699,#000033);
background:-webkit-linear-gradient(#666699,#000033);
background:-o-linear-gradient(#666699,#000033);
background:-ms-linear-gradient(#666699,#000033);
background:linear-gradient(#666699,#000033);
border:#aaa 3px solid;
}
.drop-down-arrow {
display:block;
width:0;
height:0;
margin:8px 0 0 5px;
border-top:5px solid #aaa;
border-left:transparent 5px solid;
border-right:transparent 5px solid;
}
#main-menu li li {
float:none;
min-width:190px;
padding:0;
margin:0;
}
#main-menu li li a {
min-width:190px;
margin:0;
background:#555;
border-top:#5f5f5f 1px solid;
font-size:13px;
line-height:33px;
text-align:left;
overflow:hidden;
}
#main-menu li li li a {
min-width:260px;
margin:0;
background:#555;
border-top:#5f5f5f 1px solid;
font-size:13px;
line-height:33px;
text-align:left;
overflow:hidden;
}
#main-menu li li:first-child > a {
border-top:none;
}
#main-menu li li a:hover {
background:#444;
}
#main-menu li ul {
display:none;
position:absolute;
z-index:9999;
min-width:190px;
height:auto;
padding:0;
margin:0;
box-shadow:0 0 3px #333;
}
#main-menu li ul ul {
margin:-33px 0 0 190px !important;
}
#main-menu li:hover > ul,
#main-menu li li:hover > ul,
#main-menu li li li:hover > ul {
display:block;
}
#main-menu .nav-toggle {
display:none;
}
#main-menu ul li.leaf, #main-menu ul li.expanded, #main-menu ul li.collapsed {
list-style:none;
}
#main-menu ul.menu li {
margin: 0;
}
#main-menu li.expanded, #main-menu li.collapsed, #main-menu li.leaf {
margin: 0;
padding: 0;
}
Actually the css here is based on the original css for main menu in the Professional Theme.
I'm a bit new to css. I'm trying to make a horizontal navigation bar with only 3 text items for mobile device viewing. I have width set to 100% and each section width set to 32% (I tried 33% but it would place the 3rd item on a new line.) It looks ok as it is, but when I hover (or click on using a mobile device) the background color changes and you can see the margins.
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
display:inline-block;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:33%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.nav a:hover {
background:#A26A42;
border:none;
width:32%
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
End of CSS
<ul class="nav">
<li>Search</li>
<li>Legend</li>
<li>Info</li>
</ul>
<div id="map_canvas" style="position:absolute;left:0;right:0;"></div>
Thank you for any help.
I'd rework your CSS like this jsFiddle example.
CSS
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline-block;
width:33%;
margin:0;
padding:0;
}
.nav a {
text-align:center;
padding:12px 0 13px 0;
margin:0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display:block;
}
.nav a:hover {
background:#A26A42;
border:none;
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
Try this:
* { margin:0; padding:0; } // This reset should go at the top of your CSS (if you don't have one already)
.nav li {
display:block;
float:left;
width: 33%;
}
.nav li a {
display:block;
text-align: center;
}
Fiddle: http://jsfiddle.net/kboucher/duaa6/
On "hover" you make the menu items narrower than normal. Plus you remove ther border which will narrow it even more. Also, It looks like you are using a 1px border left and right for spacing. If this is the case use margin instead. Use jsfiddle to practice.
Try this:
ul.nav {
width:100%;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:32%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
margin-left: 1px;
background: #62564A;
}
.nav a:hover {
background:#A26A42;
}
ul.nav li:first-child a{
margin-left: 0;
}
http://jsfiddle.net/mVv75/4/
if you open the following link
http://dev.scopedesign.com/client/nyfarmersmarket_02/
you find an navigation bar if you go on "ABOUT US" you will see a drop down..
then you se the problem in drop down
now i want to give you a little idea from how i make this..
I am working on joomla CMS, & i do some changes in navigation module to get my style now the follwing CSS i used for this.. the problem is it is displaying the .parent.active a
background in drop downs i dont want that for this purpose i made .parent.active a ul
but it doesnt work..
you can check this how it works by inspect element in the browser.
.parent.active a{
background-image:url(../images/selected.png);
background-repeat:repeat-x;
padding-top:13px;
padding-bottom:13px;
}
.parent.active a ul{
background-image:none !important;
background-repeat:none;
padding-top:0px !important;
padding-bottom:0px !important;!
}
.menusan
{
/* Use these parameters to positions your menu. */
position: absolute;
// left: 10px;
}
.menusan, .menusan li, .menusan li ul { /* all lists */
padding: 0;
margin: 0;
// list-style: none;
display:block;
float:left;
}
.menusan li a{
padding-left:20px;
padding-right:18px;
}
.menusan li a:hover{
background-image:url(../images/selected.png);
background-repeat:repeat-x;
padding-top:13px;
padding-bottom:13px;
}
.menusan li{ /* all list items */
padding-top:11px;
padding-bottom:11px;
// padding-left:20px;
// padding-right:18px;
-moz-border-right:#537d28 groove 2px;
border-right:#7cb43f groove 2px;
[border-right:#537d28 groove 2px;
border-right:#7cb43f groove 2px;/
border-right:#7cb43f groove 2px;]
}
.menusan li ul { /* second-level lists */
//top:35px;
margin-top:13px;
float:left;
position: absolute;
border: none;
left: -98%; /* Use left instead of display to hide menus; display: none isn’t read by screen readers. */
}
.menusan li ul li{
display:list-item;
float:none;
border: none;
background-color:#537d28;
color:#fff;
//padding:10px 10px 24px 10px;
}
.menusan li ul li:hover{
display:list-item;
float:none;
background-color:#96c73d;
}
.menusan li ul li a{
display:block;
float:left;
}
.menusan li ul li a:hover{
display:block;
float:left;
background-color:#96c73d;
}
.menusan li:hover ul, .menusan li.sfhover ul { /* lists nested under hovered list items */
left: auto; /* change is to 10px, 20px, etc for indenting the sub menu */
border: none;
display:block;
float:left;
}
/* **************** Dropdown Menu styling end here ***************/
One thing i specialy want to let you know guys that it is difficult to make div in it or cheange style name because it is a dynamic module.
Cleaned up and fixed your CSS, try this:
.navigation {
background-color:#537D28;
color:#fff;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
height:40px;
margin-bottom:0.6em;
width:100%;
}
.menusan {
margin: 0;
list-style-type: none;
font-weight:700;
float: left;
color:#fff;
}
.menusan > li {
margin:0;
float: left;
border-right:1px groove #7cb43f;
position:relative;
}
.menusan li a {
display:block;
height:40px;
line-height:40px;
padding:0 25px;
text-decoration:none;
color:#fff;
}
.menusan .active {
background: url("http://dev.scopedesign.com/client/nyfarmersmarket_02/templates/nyfm/images/selected.png") repeat-x center center;
}
.menusan li a:hover {
background: url("http://dev.scopedesign.com/client/nyfarmersmarket_02/templates/nyfm/images/selected.png") repeat-x center center;
}
.menusan li.parent ul {
position:absolute;
z-index:9999;
top:40px;
left:0;
display:none;
background-color:#537D28;
}
.menusan li.parent:hover ul {
display:block;
}
.menusan li.parent ul a {
float:left;
}
.menusan li.parent ul a:hover {
background-color:#70A835;
}
.menusan li.parent ul a {
width:55px;
}