Removed link, problem solved
The menu at the top is supposed to be a dropdown menu, but it expands to the right instead.
My CSS is this (I believe this is the relevant bit anyway)
#primary-nav, #primary-nav ul { list-style: none; margin: 0px; padding: 0px; }
#primary-nav ul { position: absolute; top: auto; display: none; }
#primary-nav ul ul { left: 100%; top: 0px; }
#primary-nav li { float: left; }
#primary-nav li li { float: none; position: relative; }
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { display: none; }
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul { display: block; }
I have no clue where exactly the direction for the menu is set.
Take a small and nice reading here.
Remove the position: absolute; from the CSS of #primary-nav ul also maybe have a look at using FireBug, it's prilliant at experimenting with these things. Also what browser are you looking in? FF displayed the menu vertically but just wasn't aligned properly and didn't have the background.
I am seeing this menu as a vertical drop-down, not a horizontal one. Please specify what browser you're viewing in when asking CSS questions, as it makes a big difference in how to answer your question. Let us know if it is fixed, and what fixed it for future readers.
One thing I noticed is that your menu items poke out of your vertical list at the right. Try applying the padding to only the <li> element, not the anchor tag. This should fix your problem. When you apply it to both, you have to keep in mind that first you're putting the padding on the <li>, then adding more padding to the inner element so that it expands outside of it's container which only has the first amount of padding applied.
It is kindof dropping down now, but in Firefox 2 it flashes and is barely unclickable due to that. And in IE7 it's poorly aligned and totally unclickable...
Related
My sub menu disappears immediately after I move my mouse pointer to scroll towards the sub menu. Feel like I have screwed my CSS somewhere. I could not figure out after several attempts to make it stay active. I followed few tutorials(have a look at it) where they have called the hover on the ul instead of a(anchor), I tried similar ways but could not achieve what I want. Please point out where I have made the mistake. Here is my fiddle(my code). Sample CSS code for hover is below.
#topnav ul li ul
{
display: none;
position: absolute;
text-align: left;
background:#510000;
top:30px;
}
#topnav ul li:hover ul
{
display: block;
}
Put the padding on your list items instead of your ul or container. That way the dropdown overlaps your hover element and your browser never thinks that you hovered out of the element. See this:
#topnav li {
display:inline-block;
padding:10px 0;
margin-right:30px;
position: relative;
}
http://jsfiddle.net/jeffreyTang/q5cmqLrf/1/
You can also give
#topnav ul li ul {
padding-top:30px
}
instead of:
#topnav ul li ul {
top:30px
}
The problem is with your padding being at the nav level and you trying to make the drop down appear below it. Because you position your dropdown away from the parent li, you're no longer hovering over it when you move your mouse down. To fix, remove the padding from the nav and add it to the li.
remove padding from here:
#topnav{
display:block;
clear:both;
width:500px;
margin:0;
padding:0;
text-align:center;
}
add to here:
#topnav li{
display:inline-block;
padding: 15px 0 15px 5px;
margin-right:30px;
position: relative;
}
remove top from here:
#topnav ul li ul {
display: none;
position: absolute;
text-align: left;
background:#510000;
}
fiddle: http://jsfiddle.net/zj8krh95/7/
Here's a way to do it (it's more of a trick):
http://jsfiddle.net/zj8krh95/5/
#topnav ul li:hover {
padding-bottom: 10px;
margin-bottom: -10px; /* so that the menubar's height stays the same */
}
#topnav ul li:hover ul {
margin-top: -10px; /* so that the menu opens at the right position */
}
Basically, on hover, i extend the menu item's height so that no mouseout is trigger when i move down to the menu.
I've been fighting with this for probably 6 hours now and am completely stumped. I can't get the submenu to appear vertical on mouse hover. Here's the link from cssdesk. What am I messing up? I know it's something really simple.
http://www.cssdesk.com/n8WCm
If the link doesn't work for you, please see this snippet:
.nav8 ul .sub-menu{
position:absolute;
display:none;
}
.nav8 li:hover ul.sub-menu {
display: block;
background:#000;
border: 1px solid #ececec;
}
If there is more that you need, please let me know.
Add To your Css
.nav8 ul li li{
clear:both;
}
.nav8 ul li ul{
width:20% !important;
}
you should make it not floated left like the main menu, so i would suggest to clear it after every submenu li and give it a fixed width
.nav8 li:hover ul.sub-menu li {
clear:both;
width: 200px;
}
I am changing some parts of my WP site to RTL.
Everything is OK except for sub-menu items. when the cursor goes over a menu item, obviously some sub-menu item opens. Now my problem is with its direction of opening. In other words, I need sub-menu items be opened to left.
I tried a simple CSS code,
#nav {direction: rtl;}
Unfortunately this code is effective only regarding menu text direction.
Is there any CSS trick making sub-menus open to LEFT?
My domain address is http://sciself.com
Thanks
Shaqpad
Simply add text-align: left; to the selector:
#wrapper #nav ul li ul li a, #wrapper #sticky-nav ul li ul li a
FullCode:
#nav ul ul, #sticky-nav ul ul {
left: auto !important;
right: 0 !important;
}
#nav ul ul li:hover ul, #sticky-nav ul ul li:hover ul {
right: 170px !important;
left: auto !important;
}
if I set #nav li a to float:leftthen it displays the list horizontally
but then if i do #nav{ float:right;} the list floats to the right but displays vertically
if I use just #nav li { float:left}it works fine but why does the floating change when using the aselected?
<div id="header">
<ul id="nav">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
css
#header{
width:600px;
height:160px;
background-color:#DDD;
border-top: solid 1px #DDD;
}
#nav {
list-style: none;
float: right;
}
#nav li{
float:left; /* if I have the "float:left" here it will always display horizontally
}
#nav li a{
/*if I float:left here instead of in "#nav li" it only works if "#nav" isn't floated
padding: 10px;
background-color: #888;
color:222;
text-decoration: none;
}
When you say #nav li a { float:left; } only, the a element will float inside li and stay vertically above each other.
JSFiddle
But if you also add #nav li { list-style-type: none; } the list elements will collapse, because there's no content anymore and then the a tags will appear horizontally.
JSFiddle
Now, if you do #nav { float:right; }, the as will appear vertically stacked, because nav occupies just the width necessary.
JSFiddle
If you use #nav li { float:left; } instead from the beginning, the links will appear horizontally no matter what. Because now, it's not the a inside li, but the li inside ul floating to the left.
JSFiddle
if I set #nav li a to float:leftthen it displays the list horizontally
Not if that’s the only thing you are doing in a ul > li > a structure.
if I use just #nav li { float:left}it works fine but why does the floating change when using the aselected?
If you just float the a elements, then the list items still behave as block, and therefor take a line each. If you float the li instead, then they align next to each other.
This might be painfully easy, so my apologies in advance, but I'm on Hour 5 trying to figure this mess out. Here's the UL I'm trying to present as a horizontal bar:
<div id="navbarwrapper">
<ul id="navbar">
<li>Search</li>
<li>Tips</li>
<li>Neighborhoods</li>
<li>Relocation</li>
</ul>
</div>
And here's the strange CSS that seems to malfunction:
#navbar {}
#navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li {display: inline;}
#navbar ul li a {text-decoration:line-through;}
The problem I'm having is that with this markup, the text wrapped in anchor tags in the HTML aren't receiving line-through (I'm using line-through as a placeholder because it's obvious when it's working or not; I don't actually want a line-through in the end).
Here's the strange bit. If I replace the "#navbar ul li a" nest with the following, it works:
#navbar li a {text-decoration:line-through;}
Furthermore, if I change "#navbar li{display: inline;}" with the following, I lose the inline property:
#navbar ul li{display:inline;}
Is it because I'm duplicating with "#navbar" and "ul"? It seems entirely too strange to me, and I feel as though I've been able to use this syntax in the past without error.
Thanks for the help in advance.
Your ul already have id of navbar. That's why #navbar ul doesn't match anything.
ul#navbar will match.
Your selectors are not correct.
#navbar is the UL element itself, so the selector #navbar ul does not target anything.
The correct selectors are
#navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#navbar li { display: inline; }
#navbar li a { text-decoration:line-through; }
#navbar ul is wrong...#navbar is the ul itself.
Your <ul> has the ID #navbar, so with #navbar ul you are actually addressing an additional ul inside your ul.
Try
ul#navbar li a {text-decoration:line-through;}