here is css
in this css i have #menu as ID of Main Menu Ul
i made change in display properrty but not any expected effect
/*Initialize*/
#menu
{
list-style:none;
padding:0;
margin: 0;
width:100%;
left:auto;
background-color:Gray;
}
ul#menu li ul.sub-menu
{
position:absolute;
clear:both;
width:100%;
height:100%;
visibility:hidden;
top: 30px; height:25px; padding:5px;
padding:0;
margin:0;
display:none;display: none;
}
#menu li
{ position:relative;
display: table-cell;
width:auto;
display:block;
font-weight:bold;
background-color:Olive;
list-style-type: none;
text-align:center;
float:left;
line-height:30px;
list-style-type: none;
display: block;
float: left;
}
ul#menu ul.sub-menu li
{
float:left;
line-height:30px;
text-indent:0;
margin:auto;
position:absolute;
list-style-type:none;
clear:both;
margin: 0;
background-color: #666;
border:none;
display: table-cell;
width:auto;
display:block;
float: none;
}
ul#menu li:hover ul.sub-menu
{
visibility:visible; clear:both; /*display:inline;*/ position: absolute; display:table-cell;
}
ul#menu li a
{
display:block;text-indent:0; text-decoration: none; padding:5px 25px 5px 10px;
}
ul#menu li ul.sub-menu li a
{
text-decoration: none;
padding: 5px 10px 5px 10px;
display:inline-block;
}
ul#menu li a:hover ul.sub-menu
{
visibility :visible;
text-indent:0;
font-size:20px;
height:100%;
width:100%;
background-color:red;
text-decoration: none;
display:block;
}
submenu will not display exactly under parent menu
I am very new to CSS and it's all control..guide me plz
You need to set left and top property
ul#menu li ul.sub-menu {
position:absolute;
clear:both;
width:100%;
height:100%;
visibility:hidden;
top: 100%;
left: 0%;
height:25px;
padding:5px;
padding:0;
margin:0;
display:none;
}
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 would like to convert my drop down menu to a drop up menu. I have searched information on the internet, but it didn't help.
My css code:
#nav
{
margin: 0px;
padding: 0px;
position: absolute;
top: 18px;
display: block;
left: 313px;
}
#nav > li
{
list-style-type:none;
float:left;
display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}
#nav > li:hover ul
{
display:block;
}
#nav > li:hover
{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#nav li ul
{
margin:0px;
padding:0px;
display:none;
}
#nav li ul li
{
list-style-type:none;
margin:10px 0 0 0;
}
#nav li ul li a
{
display:block;
padding:5px 10px;
color:#bdb49f;
text-decoration:none;
}
#nav li ul li:hover a
{
color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#nav li span
{
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
The solution lies in making child ul absolutely positioned.
Here is a working example : http://jsfiddle.net/3NmRP/
The "margin-top" on "#nav" is just here for the sake of example, you can remove it.
#nav{
margin: 0px; padding: 0px; position: absolute; top: 18px; display: block; left: 313px;
}
#nav > li {
list-style-type:none;
float:left; display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}
#nav > li ul {
position:absolute;
bottom: 100%;
}
#nav li:hover > ul {
display:block;
}
#nav > li:hover{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#nav li ul{
margin:0px;
padding:0px;
display:none;
}
#nav li ul li{
list-style-type:none;
margin:10px 0 0 0;
}
#nav li ul li a{
display:block;
padding:5px 10px;
color:#bdb49f;
text-decoration:none;
}
#nav li ul li:hover a {
color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#nav li span{
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
#nav {
margin-top: 100px;
}
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}
menu in webpage when zoomed in and out doesnt stay fixed to header image shown in figure:
the css script for this one is as follows
#navmenu{
z-index:99999;
margin-top:40px;
position:absolute;
width:100%;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
float:left;
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
font-size:16px;
color:#000000;
}
#navMenu li a{
height:15px;
float:left; display:inline;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-weight:900;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
#navmenu li.item1{background-image: url(img/about.JPG);}
#navmenu li a:hover {
color:33CCFF;
}
what is the solution to this?
if you use position:fixed; then it will not move when scrolled which is what i assume you are looking for, also when zoomed same thing, it will stay position fixed to where you want it , add maybe top:0; left:0; depending on where you want this to be positioned at-- maybe try adding some html ? other than that this is about all i can help you with
#navmenu{
z-index:99999;
margin-top:40px;
position:fixed;
width:100%;
top:0;
left:0;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
top:0;
left:0;
font-size:16px;
color:#000000;
}
#navMenu li a{
position:fixed;
height:15px;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
trying to fix a CSS bug for some code that someone else wrote. I'm no CSS expert, so I'm having trouble trying to find what is giving me this problem. This page is supposed to have 4 main menu buttons at the top. The user can hover over each and it will display a sub menu. This work fine in FF and IE, but in Safari and Chrome the buttons end up in the same spot, causing them all to display sub menus when you hover over the first button.
Link to HTML: http://www.blogtrog.com/code.aspx?id=c4c62a1a-af8f-4bfc-a3c3-f1fbf9013b3d
Here's the chunk of CSS that controls the main menu:
.top-bar {
background: url('/img/top-gradient.jpg') repeat-x top;
height : 50px;
}
.top-bar-content {
width : 1000px;
margin-left: auto;
margin-right: auto;
}
.menu-bar {
background : url('/img/menu-gradient.jpg') repeat-x top;
height : 25px;
vertical-align : middle;
}
.menu-bar-content {
height : 25px;
width : 1000px;
color : #ffffff;
font-weight : bold;
margin-left: auto;
margin-right: auto;
}
.footer-bar {
width : 1000px;
text-align : right;
margin-left: auto;
margin-right: auto;
}
hr {
border : none 0;
border-top : 1px dashed #333333;
width : 100%;
height : 1px;
}
/* menu */
ul#menu
{ margin:0; padding:1px 0; list-style:none; width:1000px; height:21px; font:normal 12px arial, verdana, helvetica; font-weight: bold;}
ul#menu li
{ margin:0; padding:0; display:block; float:left; position:relative; width:160px; }
ul#menu li a:link,
ul#menu li a:visited
{ padding:4px 0; display:block; text-align:left; text-decoration:none; color:#ffffff; width:160px; height:13px; }
ul#menu li:hover a,
ul#menu li a:hover,
ul#menu li a:active
{ padding:4px 0; display:block; text-align:left; text-decoration:none; color:#ffffff; width:158px; height:13px; }
/* sub menu */
ul#menu li ul.sub-menu
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:158px; position:absolute; top:21px; left:-1px; border:1px solid #990000; border-top:none; }
ul#menu li:hover ul.sub-menu
{ display:block; }
ul#menu li ul.sub-menu li
{ width:158px; clear:left; width:158px; }
ul#menu li ul.sub-menu li a:link,
ul#menu li ul.sub-menu li a:visited
{ clear:left; background:#d6d6d6; padding:4px 0; width:158px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; color:#333333;}
ul#menu li ul.sub-menu li:hover a,
ul#menu li ul.sub-menu li a:active,
ul#menu li ul.sub-menu li a:hover
{ clear:left; background:#d6d6d6; padding:4px 0; width:158px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
/* sub sub menu */
ul#menu li ul.sub-menu li ul.sub-sub-menu
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:157px; top:-2px; padding:1px 1px 1px 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#menu li ul.sub-menu li:hover ul.sub-sub-menu
{ display:block; }
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:link,
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:visited
{ background:#d6d6d6; }
ul#menu li ul.sub-menu li ul.sub-sub-menu li:hover a,
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:hover,
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:active
{ background:#d6d6d6; }
/* span style */
ul#menu li ul.sub-menu li a span
{ position:absolute; top:0; left:144px; font-size:12pt; color:#990000; }
ul#menu li ul.sub-menu li:hover a span,
ul#menu li ul.sub-menu li a:hover span
{ position:absolute; top:0; left:144px; font-size:12pt; color:#ffffff; }
Under ul#menu add
position: absolute;