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
Related
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}
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 have one CSS file which I found it in one website, but I have a confusion about it. The code is:
ul li a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
}
So, what I am styling here? as I know, it should be (( a )) tag, so if I add
display:inline-block;
to (( ul )) tag styling which I found here (( UL display: block )) it should work, but unfortunately I failed to make it.
Maybe I will have one more question later, but for timing i want to understand the code and correct my information.
Best regards and thanks in advance,
Gharib
edit:
I want to use both inline-block and block, and here is my full code:
ul.ablock {
display: block;
}
ul.aninline {
display: inline-block;
float: right;
width: 50%;
}
a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
a:active, a:hover {
background-color:2F62AC;
color:FFFFFF;
}
and the html is something like:
<ul class="ablock">
<li><div align="center">Find</div></li>
</ul>
<ul class="aninline">
<li><div align="center">Back</div></li>
<li><div align="center">Next</div></li>
</ul>
The above selector will target all a elements which are nested under li which is further nested under ul, that's a general element selector, which will target all the a element which falls in that pattern. It is better to be specific and use a class instead, like
ul.class_name li a {
/* Styles goes here */
}
The above selector will only target a elements which are nested under li which are further nested under an ul element having a class called .class_name
As you commented, it seems like you want to target a ul element, now instead of using something like
ul {
/* Styles goes here */
}
Will apply the styles to all the ul elements, instead, be specific, either assign a class to your ul element and use a selector like
ul.class_name {
/* Styles goes here */
}
Or you can also use a nested selector like
div.wrapper_div ul {
/* Styles goes here */
}
Here, in the above selector we are selecting all the ul which are nested under .wrapper_div.
Just a side note, you seem to be confused so don't wanna confuse you more, so don't read this, you can simply ignore, but if you want to learn, just make sure that, if you are targeting ul, make sure you use > selector which will select direct child, as users tend to nest a ul element under li, say for example dropdown menu, this is common, so it is better to use a selector like
div.class_name > ul { /* Selects first level ul elements */
/* Styles goes here */
}
ul > li > ul { /* Selects nested level ul elements */
/* Styles goes here */
}
You are targeting the <a> element here. The reason for the ul and li is that, you're targeting a specific nesting of a. Namely, you are targeting a <a> that is a descendant of <li> that is in turn, a descendant of a <ul>.
If you want to add dispay: inline-block to all <ul> elements then above the rule for ul li a you want to add:
ul { display: inline-block; }
I'm working on front-end of an intranet website.
The problem I have is with to do with the list compatibility. What I want to do is to style the list items, for example, instead of having bullets, I would like to have arrows. I have inserted the arrows, but it displays differently on Firefox compared with Chrome.
On Firefox it displays the bullet point on the corner, but on Chrome it displays inline with the link text which is what I'm looking for.
Here is the CSS for the list and arrow:
.jt-menu .item-280 li li {
color: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 1px 0 0 1px;
text-align: left;
width: 172px;
list-style: disc inside url("../../../../images/barrow.png");
}
Add this to your CSS:
.jt-menu > li > ul ul li {
width: 240px !important;
}
.jt-menu > li > ul ul a {
display: inline-block;
}
Try adding more left-margin and setting line-height as tall as your image.