I'm wondering is there an easy way to fix the width on this dropdown menu?
http://jsfiddle.net/s3bA3/3/
I'd like a box effect dropdown list in the same position as where is says "DROPDOWN"
Seems like it shouldn't bee too hard a fix but I'm pretty new to CSS.
Here's the CSS code:
nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #242424;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position:fixed;
top:0px;
}
nav li {
float: left;
}
nav li li {
clear: both;
}
nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #7ACC01;
border-right: 1px solid #ccc;
}
nav li a:hover {
color: #c00;
background-color: #fff;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
Thanks for reading.
nav ul li:hover > ul {
display: block;
position:absolute;
}
http://jsfiddle.net/AK7Fb/
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?
This is my css:
.nav {
margin: 0px;
padding: 0px;
list-style: none;
display: table;
width:100%;
text-align: center;
position: relative;
}
.nav li {
display: table-cell;
}
.nav li a {
background: #FF0000;
color: #fff;
display: block;
padding: 7px 8px;
text-decoration: none;
}
.nav li a:hover {
background-color:#000;
border:1px solid #fff;
}
.nav ul {
display: none;
position: absolute;
margin-left: 0px;
list-style: none;
padding: 0px;
display: table;
width: 100%;
left: 0;
visibility: hidden;
}
.nav li:hover ul {
visibility: visible;
}
.nav ul li {
display: table-cell;
}
.nav ul a {
display: block;
height: 15px;
padding: 7px 8px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #222;
}
.nav ul li a:hover {
color: #069;
}
JSfiddle: http://jsfiddle.net/spog4sqg/3/
Here when hover over HOME display text-decoration:underline;, when hover over other remaining list, display like this: http://s7.postimg.org/br5nkl8zf/Untitled_1_copy.png
May i know, what is the exact css property to fix this.
Thanks in advance..
Basically this is what you're looking for:
.navigation > ul li:first-child a:hover {
background-color: red;
text-decoration: underline;
}
See Example
I used :first-child pseudo-class, hope that helps?
.nav li:first-child a:hover {
text-decoration: underline;
}
http://jsfiddle.net/w81swq5j/2/
I guess, that instead of the underline property, you mean that you want the hover state to stay active when you hover the child list.
In order to do so, trigger the hover effect on the list-item instead of the anchor.
Change:
.nav li a:hover {
background-color:#000;
}
To:
.nav li:hover a {
background-color:#000;
}
Updated Fiddle.
[EDIT]
Hope I understand your comment right. By 'underline' you mean that the submenu gets a background-color?
Then change it to:
.nav li:hover ul li a {
background-color:#000;
}
Updated Fiddle 2.
I am not exactly sure how to ask this question. I am new to responsive design and understand the flow down, but I don't want to use the flow down on my menu. It is broken into 3 sizes and the mobile size, I don't want sub-menus and need it at 100% width. How do I block the information from the previous id and class selectors.
/*------------menu */
nav {font-family: "BenchNine", "PT Sans Narrow", Arial, Helvetica, sans-serif;
text-transform: uppercase;
width:960px;
height: 43px;
margin: 0px auto 0px auto;
/*background:#0084FC;*/
border:0px solid #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
z-index:10;
}
/*nav ul {list-style: none;margin: 0;padding: 0 5px; } */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {margin: 0;padding: 0 5px;list-style: none;position: relative;display: inline-table; z-index:1;}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li span { width:425px;}
nav ul li {
float: left; position: relative; padding: 0px; top:0px;border-top:0px solid #0082f8;
}
nav ul li:hover {
background: #025287;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {font-size: 20px; color: #B3DBFF; display: block; padding: 54px 10px 6px 10px; margin-bottom: 0px; z-index: 10; position: relative; font-weight:bold; text-transform:uppercase;}
nav ul ul {
background: #0082f8; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 0px solid #0082f8;
border-bottom: 0px solid #0082f8;
position: relative;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #025287; color:#fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
This is the css for the menu in the responsive css file.
#media only screen and (max-width: 767px) {
nav {width:100%;background:none;height:auto;margin: 0px auto 15px auto;}
nav ul li {float: none;background:#000;text-align:center;padding-bottom:0px;margin-top:5px;}
nav ul li span {clear:}
nav ul li:hover {background: url('../images/menu-bg-act_mob2.png') repeat-x;}
nav ul li a{margin-bottom : 0px;}
nav ul li a{margin-bottom : 0px;}
Your question is not very clear, but it sounds like you need to override some existing style declarations.
You should be able to do this by making more specific declarations.
E.g.:
html nav { margin: 20px } will override nav { margin: 10px }.
Check out Andy Clarke's CSS Specificity Wars for more on the subject.
I'm trying to center my dropdown menu without it affecting the functions of the menu. Any help is much appreciated! Thanks!
#menu_container { padding: 1px 0; border-bottom: 1px solid #FFF; }
#menu_container ul { list-style-type: none; }
#menu_container ul li { float: left; font-size: 12px; position: relative; }
#menu_container ul li a { display: block; padding: 5px 15px; color: #808080; text-decoration: none; }
#menu_container ul li a:hover { background-color: #333; color: #808080; }
#menu_container ul li ul { display: none; position: absolute; top: 25px; left: 0; z-index: 150; border: 1px solid #ddd; }
#menu_container ul li ul li { width: 310px; float: none; }
#menu_container ul li ul li a { background-color: #fff; }
It depends on your layout and page structure. It might be as simple as assigning #menu_container a fixed-width and automatic margins:
#menu_container { width: 640px; margin: 0 auto; padding: 1px 0; border-bottom: 1px solid #FFF; }
/* Depending on your layout, you may also need to assign a full-width and/or relative positioning to a parent/container/wrapper element */
You could set the #menu_container element to center by adding
margin:0px auto;
In order for that to work, you will also have to set a width for the container.