Hey guys I set up this CSS file to use on the navbar:
#nav
{
background-color: #98bf21;
}
#nav li
{
float:left;
}
#nav li ul{
position: absolute;
width: 172px;
left: -999em;
}
#nav li:hover ul{
left: auto;
}
#nav a:link,a:visited
{
display:block;
width:164px;
font-weight:bold;
color:white;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#nav a:hover,a:active
{
background-color: #7A991A;
}
And it seems to be affecting all the elements. For example all elements take the styles if the #nav a styles. Is there something I'm missing here? I'm new to web design.
#nav a:link,a:visited and #nav a:hover,a:active look like they could be the problem (the second selector is not bound to #nav in those lines and so will be matching all a elements. I'm assuming you mean to do #nav a:link, #nav a:visited and #nav a:hover, #nav a:active instead.
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 creating a personal website for my programming class and I'm having trouble having my "li" tags items drop down, but instead their going off to the right. For example I hover over my "li" tag to have my drop down "li" items drop down. But instead they drop down and go to the right. I want them to go straight down. Any help?
Here is the CSS (And yes I know that some of my CSS is repeated and unnecessary) :
#nav {
background-color:#222;
margin:-15px;
margin-left:230px;
margin-right:230px
}
#nav_wrappper {
width: 960px;
margin: 0 auto;
text-align:left;
}
#nav ul {
list-style-type: none;
text-align:center;
margin: 0 auto;
position: relative;
display:inline-block;
width:100%;
}
#nav ul li {
display: inline-block;
position:relative;
width:33%;
float:left;
}
#nav ul li:hover {
background-color:#333;
}
#nav ul li a,visited {
color:#ccc;
display:block;
padding:15px;
text-decoration:none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration:none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul {
display:none;
position: absolute;
background-color:#333;
border: 5px solid #222;
border-top:0;
margin-left: -5px;
min-width:160px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a, vistited{
color:#ccc;
}
#nav ul ul li a:hover {
color:#099;
}
i am using tinymce to make rich text area input and i have a css styled dropdown menu (only css, no javascript). the problem is, the dropdown menu is conflicting with tinymce.
i am giving a snapshot of the problem
here is my css for my drop down menu
#menu, #menu ul{
margin:0 90px;
padding:0 10px;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#menu a{
display:block;
padding: 5px 15px 5px 15px;
border-top: 1px solid #ffffff;
color:#fff;
text-decoration:none;
background: #1D2D4F;
margin-left: 1px;
white-space: nowrap;
}
#menu a:hover{
background-color:#475A7F;
}
#menu li{
float:left;
position:relative;
width: 150px;
}
#menu ul {
position:absolute;
display:none;
width:11.3em;
margin: 0 -10px;
}
#menu li ul a{
width:11.3em;
height:auto;
float:left;
}
#menu ul ul{
top:auto;
}
#menu li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}
.clear{
clear:both; !important
height:0;
font-size: 1px;
line-height: 0px;
}
how do i fix this problem?
Have you tried adding a z-index:100; to the drop down menu?
The number 100 is just for test, you can change it to another number later.
I am so close to launching my first Magento project, and the final leg has just been one CSS hurdle after another… mostly with IE.
This last one popped up just after fixing 5 other things, and has not been an issue until now.
In IE, my top nav links (2) are appearing about 20px too high until you hover over them and then they jump into place.
Navigation CSS:
.nav-container { background:#ffffff url(../images/bkg_nav0.jpg) 50% 0 repeat-y; }
#nav { width:918px; margin:0 auto; padding:0 16px; font-size:13px; }
#nav li { position:relative; text-align:left; }
#nav li.over { z-index:998; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none;}
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
#nav ul li.parent li a { background-image:none; }
/* 0 Level */
#nav li { float:left; }
#nav li.active a { color:#8751b0; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#000000; font-weight:bold; display: block;}
#nav li.over a,
#nav a:hover { color:#8751b0; display: block;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#ecf3f6 url(../images/bkg_nav1.gif) 0 100% repeat-x; }
#nav ul li.last { background:#ecf3f6; padding-bottom:0; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }
As you can see, there are no :hover properties with margins that are overriding the original state. I just can't figure this one out.
I have tried Firebug but I just can't relate it to the IE issues. It renders fine in FF...and the IE 'Developer Tools' just can't compare to Firebug...
Please, any help is appreciated!
I had the same issue with a menu and found that removing the "display: block;" fixed this issue with IE.
I am currently using position:absolute; for the second level menu, because when I use position: relative; the first level menu is broken (after the hovered item is a linebreak?)
But I want to achieve that the second level menu that is showed, is positioned relative to the hovered item in the first level menu (directly under it and also horizontal)
My menu is like this currently:
Home / Test / News
Test_Sub1 / Test_Sub2 / Test_Sub3
But should be
Home / Test / News
Test_Sub1 / Test_Sub2 / Test_Sub3
Here is my CSS Code
#navigation ul.menu {
list-style-type:none;
list-style:none;
/*overflow:hidden;*/
width:980px;
}
#navigation li {
list-style:none;
list-style-type:none;
padding:0;
float:left;
display:inline;
height:32px;
}
#navigation ul.menu {
width:100%;
height:32px;
border-bottom: 1px solid #cecbcd;
}
/* style list as navigation using float:left */
/* set distance from left corner to the first li item */
#navigation ul.menu li:first-child {
margin-left:150px;
}
#navigation ul.menu li ul li:first-child {
margin-left:0px;
}
#navigation ul.menu li ul {display:none; position:absolute; top:32px; left: 10em; float:left; border:none;}
#navigation ul.menu li:hover ul {display:inline;}
#navigation ul.menu li:hover ul li {height:45; padding-top:8px; float:left; position: relative;}
#navigation ul.menu li:hover ul li a {float:left;}
#navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }
#navigation ul.menu li a {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li ul li a {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li ul li a:hover, #navigation ul.menu li ul li.active-trail a.active-trail {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:underline;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li a:hover {
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;
}
#navigation ul.menu li a.active, #navigation ul.menu li.active-trail a.active-trail {
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;
}
div.region-header ul.menu {
display:none;
}
Try This : http://jsfiddle.net/rathoreahsan/3NRu4/
Edit:
I have figured out your code:
you have defined:
#navigation ul.menu li:hover ul {display:inline;}
Chenge it to:
#navigation ul.menu li:hover ul {display:block;}
Also in this line,
#navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }
Remove left: 5em to get the result like this: http://jsfiddle.net/rathoreahsan/GFURU/
Edited:
More over in this line:
#navigation ul.menu li ul {display:none; position:absolute; top:32px; float:left; border:none; background:red; left: 10em;}
Remove left: 10em to get ul a relative position
See the Demo: http://jsfiddle.net/rathoreahsan/rTsAE/
Hope it will fix it.