This question already has answers here:
Reset CSS display property to default value
(8 answers)
Closed 9 years ago.
I'm using joomla template in which various stylesheet files are there for page layout. I'm demonstrating the brief way here:
style1.css
#header ul.menu li a{ background-color: red; }
style2.css
#header ul.menu li a{ color: blue; }
style3.css
ul.menu li a:hover{ background-color: gray; }
style4.css
ul li a:active{ background-color: green; }
style5.css
ul.menu { list-style: none;}
ul.menu li{display: inline;}
ul li a{float: left; display: block;}
What's the best way to reset default styles of #header menu?
I could reset the css as my own staying at style1.css as followings placing !important if needed:
#header ul.menu{list-style: none;}
#header ul.menu li{display: inline-block;}
#header ul.menu li a{color: black; background-color: none;}
#header ul.menu li a:hover{color: black; background-color: none;}
#header ul.menu li a:active{color: black; background-color: none;}
But for this I have see first what styles are applied in that menu and then set my own styles.
But I'm looking for the css rules that whatever the styles are applied in that menu I could reset to its browser defaults. Is there any way to do this?
two ways with javascript
change the className (you will have to replace "#header" with ".header")
change the stylesheet being used
Related
On this site, if I inspect "What We Do", I see the HTML code:
<a title="What we do – Mad Hat Media" href="http://test.doig.com.au/MHM/services/" class="sf-with-ul">What We Do<span class="sf-sub-indicator"> »</span></a>
with CSS code:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: none;
content: '»';
color: #622C82;
}
I can't see why the content: '»' does not display. The CSS element has a width and a colour.
What is missing are the drop down indicators (indicated by the green arrows in the screen shot below)
Help appreciated.
I guess you should have a look at this class
.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
background: url(images/arrow-down.png) no-repeat;
height: 16px;
position: absolute;
right: 5px;
text-indent: -9999px;
top: 13px;
width: 16px;
}
the text-indent property causes the >> to go AWOL. Remove that and you are kinda set. You may have to toggle other classes though.
As for the drop down indicators, they are very much present, just remove the background:none
On that note, content property is usually set to ::before and ::after pseudoelement. Do have a look into this mdn link .
As I can see in your code selectors .menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator look almost equal.
Anyway if you want implement content attribute it's better to write something like:
.sf-sub-indicator::after {
background: none;
content: '»';
color: #622C82;
}
http://imgur.com/a/hw1kb
Background image is set for this span.
Inspect it again:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: url(images/arrow-right2.png) no-repeat;
}
I'm not sure if I formulated the question correctly, but let me try to explain what I want to achieve.
I'm trying to style navigation menu of a WordPress-based site.
I want the submenu links to be evenly arranged along the entire width of the website's <body> tag (960px wide). If the links of a particular submenu do not fit in one row, I want them to wrap around and arrange themselves in neat columns.
Finally, I want the submenu, when it drops down on hover, to push the rest of the website's content down.
Problem: the submenu unordered list affects the position of the links in the parent unordered list, moving the links around. Somehow, the only thing I could do to keep the parent menu links in place was to pull the submenus out of the way by applying margin-right:-965px;
Question: How should I modify my CSS to position both submenus all the way to the left, level with the edge of the main container?
(If necessary, I can assign custom classes to each submenu separately, for example: .submenu-about and .submenu-investors.)
Thank you in advance for your help!
Here's the complete CSS for the navigation menu:
.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
This Should do it
Add this to your css
.main-navigation ul li .sub-menu {position:absolute; left:0px;}
Found my own answer.
Remove the background from ul li:hover ul.
Set position:relative and the gray background for the ul li:hover >ul li.
Set individually the negative left margins for each submenu li item, to pull them left separately by different number of pixels.
Im trying to style the submenu on my wordpress menu
http://www.milknhny.co.uk/SofiaWork/
I tried
.headermenu ul ul
etc,... and it didnt work, can anyone suggest the correct class structure?
ive already tried
.headermenu ul li ul li also
thanks
Your ul's got an id attribute. Why not use it in css:
#menu-header-menu - I think it is the top-level menu.
#menu-header-menu .sub-menu - targets ALL sub menus of top-level menu.
Not sure what you are trying to customise, but the anchor text also has a background which does not help styling, so if you remove this it can help you style the list item better.
#headermenu ul ul li a {
background: none;
}
#headermenu ul ul li a:hover, ul.headermenu ul ul li:hover {
background: none;
}
Then use :
#headermenu ul ul li {
background: red ;
}
AND:
#headermenu ul ul li:hover {
background: yellow;
}
I have an .active class to apply to li a for the current page.
But it keeps being overrode by my styling the main nav div.
#nav ul li a:link, #nav ul li a:visited {
color: #BBBBBB;
}
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff;
}
I've tried a few variations on the second rule to try and dethrone the first, but none seem to work. (I didn't have the id in originally, but I know that id is a step above class in the cascade). Maybe I'm missing something really basic, or maybe my first rule is foolishly over specific? (I always seem to be running into this sort of problem with links, specifically)
Assuming you have markup like this:
<div id="nav">
<ul>
<li>foo</li>
<li>foo</li>
<li class="active">foo</li>
</ul>
</div>
Your CSS appears to work fine.
See http://jsfiddle.net/X7eAw/1/
You may need to add
#nav ul li.active a
to force specificity if the active class is not being applied. That selector is probably overkill however.
assuming you have the active class on your li element. If you are applying active to the anchor, then the rule should be: #nav ul li a.active:link
You can prevent a style from getting overriden in CSS by using !important tag:
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff !important;
}
I have a menu:
<div class="headerMenu">
<ul>
<li>Home <span>Home Page<span></li>
<li>About <span>About My Website<span></li>
<li>Contact <span>Get in touch<span></a></li>
</ul>
</div>
My current CSS is as follow:
.headerMenu{
width: 100%;
}
.headerMenu ul{
margin: 0;
padding: 0;
float: left;
}
.headerMenu ul li{
display: inline;
}
.headerMenu ul li a{
float: left;
color: white;
padding-top:25px;
padding-left:50px;
font-size:24pt;
}
.headerMenu ul li a:visited{
color: white;
}
.headerMenu ul li a:hover, .menu ul li .current{
color: #fff;
background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}
And now for the question:
How can i get the content in the span tag to be below the Main text.
When i hover over the anchor, How do i add the hover image as shown in screen shot
The Mockup i created in Photoshop looks like this:
I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.
1) How can i get the content in the span tag to be below the Main text.
You need to use display: block on the span to have it appear on a new line:
.headerMenu ul li a span {
display: block;
}
2) When i hover over the anchor, How do i add the hover image as shown in screen shot
Try to center the arrow to the top. This might work:
.headerMenu ul li a:hover, .menu ul li .current {
color: #fff;
background: url(../../Content/Images/menu-selector.png) no-repeat center top;
display:block;
/* also make sure that you use display block with correct height
so that you can positionate the arrow on the correct place... */
}
Add the following code for problem 1:
.headerMenu ul li a span {
display: block;
}
This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.
For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.
.menu ul li:hover{
background: url(../../Content/Images/menu-selector.png) repeat-x;
}
See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)