This is a CSS issue: i have a drop down menu created with the following code:
#menu_container ul {
list-style-type: none;
float: left;
padding: 5px 0;
display: inline;
}
#menu_container ul li {
display: inline-block;
float: left;
}
#menu_container ul li a {
display: inline-block;
color: #000;
text-decoration: none;
padding: 5px 10px;
margin: 0 10px;
}
#menu_container ul li a:hover {
background-color: #000;
color: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a {
background-color: #000;
color: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
#menu_container ul li ul {
padding: 0;
position: absolute;
display: none;
opacity: 0;
visibility: hidden;
}
#menu_container ul li ul li a {
display: block;
}
#menu_container ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index: 2;
background-color: #fff;
color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
#menu_container ul li ul li:hover {
background-color: #000;
color: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;;
}
#menu_container {
border-top: 1px dotted #DDDDDD;
border-bottom: 5px solid #DDDDDD;
padding: 0px 28px;
}
#menu_container .cat_menu { border-left: 1px dotted #DDDDDD; }
The site is edicionesparalelo.com
As you can see if you access it, when you hover over "Blog" the elements i want to display DO display, but not is i want. I want them to display one below the other. I mean:
Reseñas
Textos
And not like they appear:
Reseñas Textos
I will really thank any help; this is driving me mad. Thanks!
I think the answers above are almost there.
I got it to work with this in my Google Dev tools. It's best not to use !important, so try removing them after you verified this works:
sub-menu li a {
display: block;
width: auto;
margin: 0 !important;
}
.sub-menu li {
display: block !important;
float: none !important;
}
Add a new rule to .sub-menu:
.sub-menu {
display: block;
width: 90px;
}
All you need to do is remove that float and that display:inline-block from your elements.
For example:
.sub-menu > li {
float: none;
display: block;
}
Once this is applied your list items will break into new lines again.
And by the way:
Your defintion of
#menu_container ul li {
float: left;
display: inline-block;
}
is quite general. This is the source of your problem. It matches too many li elements.
Target the problematic elements and solve the issue by doing something like this:
#menu_container ul li ul {
width: 70px; /** desired_width **/
}
#menu_container ul li ul li {
width: 100%; /** 100% width makes them stack on each other and not side by side **/
display: block
}
That should do it.
Related
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/
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.
I want to code this so the active and hover li's appear over the normal li. But what happens is the hover and active li's appear inside the normal li. When I add padding (to hover and active li's) in an attempt to duplicate the size of the normal li, the normal li remains visible and simply expands by the increase padding of the hover and active li and not covered as I need it to be.
Here is my CSS:
/***********HORIZONTAL NAVS***********/
.menu-horizontal {
margin: 3px 2px 0.75em;
}
.menu-horizontal ul.top-level {
background-color: #FFFFFF;
clear: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-horizontal ul.top-level li {
background: #FEAB27;
border-radius: 7px 7px 0px 0px;
display: inline-block;
height: 28px;
padding: 0 25px;
}
.menu-horizontal ul.top-level {
display: inline-block;
float: left;
height: 23px;
margin-left: 173px;
padding-top: 5px;
text-align: center;
text-transform: none;
}
.menu-horizontal ul.top-level li a {
background: none repeat scroll 0 0 transparent;
color: #000000;
display: inline-block;
line-height: 24px;
text-decoration: none;
font-family: Verdana,'Magra','Gafata',sans-serif;
font-size: 102%;
font-weight: bold;
}
.menu-horizontal ul.top-level li.selected a, .menu-horizontal ul.top-level li a:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
text-decoration: underline;
}
.menu-horizontal li ul.second-level {
display: block;
left: -999em;
margin: -1000px 0 0;
overflow: visible;
padding: 0 0 9px;
position: absolute;
text-align: left;
}
.menu-horizontal li:hover ul.second-level, .menu-horizontal li.hover ul.second-level {
left: auto;
}
Thanks!
I am not sure if I got your question right, but did you want something like this?
.menu-horizontal ul.top-level li.selected, .menu-horizontal ul.top-level li:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
}
.menu-horizontal ul.top-level li a:hover, .menu-horizontal ul.top-level li.selected a {
text-decoration: underline;
}
http://jsfiddle.net/svSwA/
If you want to change another element as an A you have to put the :hover selector on it, or you have to use JavaScript.
I'm on Chrome/Firefox. I've read several tutorials and questions here too on this topic.
I have a UL containing LI. I set the LIs to "display: inline;", but they won't. They're still vertical.
What am I doing wrong?
Thx.
Here's my css:
.menu{
width: 100%;
padding: 0px;
margin: 0px;
outline: 1px solid grey;
background-color: #f6f6f6;
font-size:100%;
}
.menu ul{
float: left;
list-style: none;
margin: 0px;
padding: 0px;
background-color: #f6f6f6;
}
.menu li ul{
display: none;
height: auto;
padding: 0px;
margin: 0;
background-color: #f6f6f6;
outline: 1px solid gray;
position: absolute;
z-index: 200;
left: 20px;
top: 30%;
}
.menu li:hover ul{
display: block;
}
.menu li:hover{
background-color: #005ea2;
}
.menu li{
display: inline;
padding: 0;
margin: 0;
border-bottom: 1px dotted grey;
}
.menu ul li:last-child{
border: none;
}
.menu a{
display: block;
color: #333333;
text-decoration: none;
margin: 0px;
margin-left: 5px;
}
.menu a:hover{
color: white;
background-color: #005ea2;
}
.menu .menu_header{
color: #333333;
}
.menu .menu_header a:hover{
color: white;
}
The <li> elements need to have float:left
first of all you might consider adding the relevant HTML to your answer, to help answerers understand your situation better.
I can spot several strange things that might be related to your problem.
First, the li ul selector are not very useful: it's more likely that you meant the opposite, ul li.
Second, I see that on hover you have something changing to display: block. This is a very
strange behavior to have on hover, are you sure?
Third, I see that you have a { display: block }. This does not play nicely if its container is display: inline so you might want to switch to display: inline-block for the container (which is what I would suggest for an horizontal menu anyway)
I did this before but I can't remember how to do it again.
Image of what i'm trying to get:
and what I have so far
In between each link,, theres two borders. yes I know how to make the effect, put two borders together. But the problem is I can't do it!
At first I tried Jefferey ways Technic.
nav ul li:before { border-left: 1px solid red; content: ''; margin: 0 -30px; position: absolute; height: 20px; }
nav ul li:after { border-right: 1px solid white; content: ''; margin: 0 39px; position: absolute; height: 20px; }
It worked, except the borders from the left and right end of the nav is sticking out. I tried :first-of-type and :last-of-type to try to remove the borders at the end, but they didn't go away.
Then, I tried just using both :first-of-type and :last-of-type to create the borders,but again. it didn't work. So I don't really know what to do to create the effect! I wish there was a way to remove the front and end borders with Jefferey Ways code but I can't. Can anybody help?
Heres the whole css of the nav.
nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto; padding: 11px 29px; width: 670px; }
nav ul {}
nav ul li { display: inline; padding: 32px; margin: 0 auto; }
nav ul li:before { border-right: 1px solid red; }
nav ul li:odd { border-right: 1px solid white; }
nav ul li a { color: #626262; height: 20px; }
#nav {
background: #282828 url(../images/nav-bg.png) repeat-x;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
margin: 24px auto;
padding: 11px 29px;
width: 670px; }
#nav ul { list-style: none; padding: 0; margin: 0;}
#nav ul li {
display: inline;
padding: 32px;
margin: 0 auto;
border-left: 1px solid #LIGHTERCOLOR;
border-right: 1px solid #DARKERCOLOR;
}
#nav ul li:first-child { border-left: 0; }
#nav ul li a { color: #626262; height: 20px; }
But I would suggest you cut out the separator as an image and put it on li as
background: transparent url(border-image.png) left center no-repeat;
and on the li:first-child have
background: none;