Q: Would anyone know how to style the sub-menu on my website so it doesn't over-lap as it does now?
I have tied to do it within the CSS but all the submenus move across, rather than just the child menus.
cherwelluk.com
Roll-over Windows and try and select timber alternatives.
.nav.navbar-nav li ul.sub-menu li a {
color: #FFF;
text-transform: uppercase;
padding: 5px 0px;
display: block;
font-size: 14px;
}
Image
You can add this CSS rule to move the sub-sub menu to the right of the sub menu:
.nav.navbar-nav ul li ul.sub-menu {
left: 200px;
}
Try adding the following CSS.
.sub-menu{margin-left:10px}
Related
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
I was working on this site and added the header menu with drop downs. The third menu item WINDOWS SUPPORT sub menus are aligned to the left while others are aligned to to the center of the dropdown.I have edited the css to
.sub-menu li a {
text-align: center;
}
but the dropdown area is aligned to the right compared to others.Please help me in making it align correct.Thanks!!
i checked your site. just add these two classes in your css. it will resolve the problem.
#mainmenu .menu-item-292 ul
{
left:-15px;
}
#mainmenu .menu-item-292 li
{
padding-left:15px !important;
}
watch your css file and remove this 2 lines
#mainmenu .menu-item-291 a{margin-right:15px;}
#mainmenu .menu-item-292 a{margin-left:-16px;}
If you want to make more space use padding and border-box:box-sizing
You have
#mainmenu .menu-item-292 a {
margin-left: -16px;
}
It's pulling over both the "Windows Support" anchor, and all anchors below it.
Try this
Add margin-left: 0; css for given anchor tags into your style.css file I guess at line no. 383
#header #mainmenu ul.children li a, #header #mainmenu .sub-menu li a {
color: #FFFFFF;
font-family: 'menu-font' !important;
font-size: 13px !important;
padding: 5px 20px;
text-align: left;
text-transform: uppercase;
margin-left: 0;
}
I hope this solves your problem!
I've been working on a dropdown menu here http://watercookies.topfloorstudio.com/
I want the main menu items (Engage, Play, View, etc...) to have the text-shadow but not the dropdown menu items.. I've tried specific selectors which didn't work and I tried classes applied to only those elements and the sub li elements still had the text shadow. Any suggestions?
Add "text-shadow: none" to this line in your CSS.
ul#main-nav li ul li {
float: none;
font-size: 0.5em;
**text-shadow: none;**
}
You have this CSS:
ul#main-nav li {
float: left;
font-family: "Oswald", "Impact", sans-serif;
position: relative;
text-shadow: 1px 1px #666666;
}
It is catching all of the lis. Move the drop shadow to this selector:
ul#main-nav > li > a
i cant post all of my code, so please check the url.
http://www.bierhauschina.com/shekou/kulinarium/
here is css:
http://www.bierhauschina.com/menu/menu_style.css
The problem is a css menu. my menu shows all lists of menu under the first menu. i don't know where is problem, but it is exactly in css. where.. i can't got it.
Add position: relative to .nav li in your CSS.
Add position: relative; to .nav .select, .nav .current, making it like this:
.nav .select, .nav .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
position: relative;
}
This style:
.nav .select *:hover .select_sub, .nav .current .show
Sets position to absolute. Set it to relative. Also you are loading menu_style.css twice, remove the second reference.
I have a menu uses nested unordered lists to give the appearance of a secondary dropdown menu. This is working well for the most part. I recently refactored the CSS code to make it cleaner and easier for me to understand, but now I can't seem to get the secondary (dropdown) menu to appear behind the top-level menu. Both elements have positions declared.
The HTML is fairly straightforward and I don't think there's any problem here:
<div id="header-menu">
<ul>
<li>what</li>
<li>what
<ul>
<li>what</li>
<li>what</li>
<li>what</li>
</ul>
</li>
<li>what</li>
<li>what</li>
<li>what</li>
</ul>
</div>
The CSS, however, is doing things that I don't really understand.
#header-menu > ul > li {
font-size: 2em;
display: inline;
position: relative;
}
#header-menu > ul > li:hover {
background: #a4b0ac;
padding: 25px 0;
}
#header-menu > ul > li > a {
padding: 25px;
position: relative;
z-index: 100;
}
#header-menu li > ul {
display: none;
position: absolute;
z-index: 99;
background: #CC6601;
}
#header-menu li:hover > ul {
display: block;
}
#header-menu li ul > li {
font-size: 0.8em;
display: block;
position: relative;
}
#header-menu li ul > li a {
padding: 10px;
display: block;
}
#header-menu li ul > li a:hover {
background: #a4b0ac;
display: block;
}
EDIT: Misread your question initially.
You can't put different z-indexes (z-indices?) on elements that are nested in that way because inside of one element cannot hide behind itself while the rest of it shows. You'll have to un-nest these and then apply the z-index, or remove the conflicting reference in the first z-index applied to <a>.
I tested this in Firefox 3.6 on Windows and it appears to work fine. That is, the secondary menu is appearing under the primary menu. Perhaps you could give us a screenshot of what you're seeing?
Cheers,
Scott
I looked at in in IE7, FF3.5, and Chrome (4.0.249.8).
It looked great in Chrome (drop down under the second menu item), in IE7 the drop down was under the third menu item, and in FF it was under the first menu item. Is this part of the problem? If is is, I believe it is a "position" (relative/absolute) problem vs. a "z-index" problem.
Also, with regard to z-index, I believe that IE resets the z-index stack whenever you change the position along the hierarchy. In your example, the css changes from "relative" to "absolute". Maybe that has to do with it?