p. bosch
Reputation: 139
Change font size on a CSS menu
this is my first ever CSS coding, and I have this CSS code that I took from a website to adapt it to what I want to do, however when I try to change the font size of the drop down menu it doesn't change.
Here's the CSS code:
<!-- CSS menu -->
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
line-height: 1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
text-align: center;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
border-bottom: 0px solid #0fa1e0;
width: auto;
font-size: 50px;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding: 19px 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
display: inline-block;
float: center;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #000000;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
color: #ffffff;
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
background: -o-linear-gradient(top, #262626 0%, #070707 100%);
background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
font-size: 11px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #0a6d98;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}<div id='cssmenu'>
<ul>
<li class='active has-sub'><a href='techniques.html'><span>Techniques</span></a>
<ul>
<li class='has-sub'><a href='attacks.html'><span>Attacks</span></a>
<ul>
<li class='has-sub'><a href='Aclosehanded.html'><span>Close-Handed</span></a>
<ul>
<li class='last'><a href='gyaku-tsuki.html'><span>Gyaku-Tsuki</span></a></li>
<li class='last'><a href='oi-tsuki.html'><span>Oi-Tsuki</span></a></li>
<li class='last'><a href='uraken.html'><span>Uraken</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Aopenhanded.html'><span>Open-Handed</span></a>
<ul>
<li class='last'><a href='nukite.html'><span>Nukite</span></a></li>
<li class='last'><a href='shotei-uchi.html'><span>Shotei-Uchi</span></a></li>
<li class='last'><a href='shuto-uchi.html'><span>Shuto-Uchi</span></a></li>
<li class='last'><a href='soto-uchi.html'><span>Soto-Uchi</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='legs.html'><span>Leg</span></a>
<ul>
<li class='last'><a href='mae-geri.html'><span>Mae-Geri</span></a></li>
<li class='last'><a href='mawashi-geri.html'><span>Mawashi-Geri</span></a></li>
<li class='last'><a href='ushio-geri.html'><span>Ushio-Geri</span></a></li>
<li class='last'><a href='yoko-geri.html'><span>Yoko-Geri</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='defenses.html'><span>Deffenses</span></a>
<ul>
<li class='has-sub'><a href='Dclosehanded.html'><span>Close-Handed</span></a>
<ul>
<li class='last'><a href='age-uke.html'><span>Age-Uke</span></a></li>
<li class='last'><a href='gedan-uke.html'><span>Gedan-Uke</span></a></li>
<li class='last'><a href='uchi-uke.html'><span>Uchi-Uke</span></a></li>
<li class='last'><a href='yoko-uchi-uke.html'><span>Yoko-Uchi-Uke</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Dopenhanded.html'><span>Open-Handed</span></a>
<ul>
<li class='last'><a href='shuto-uke.html'><span>Shuto-Uke</span></a></li>
<li class='last'><a href='teiso-uke.html'><span>Teisho-Uke</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='defensebasics.html'><span>Deffense Basics</span></a>
<ul>
<li class='last'><a href='#'><span>1</span></a></li>
<li class='last'><a href='#'><span>2</span></a></li>
<li class='last'><a href='#'><span>3</span></a></li>
<li class='last'><a href='#'><span>4</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='katas.html'><span>Katas</span></a>
<ul>
<li class='last'><a href='#'><span>1</span></a></li>
<li class='last'><a href='#'><span>2</span></a></li>
<li class='last'><a href='#'><span>3</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='movements.html'><span>Movements</span></a>
<ul>
<li class='last'><a href='8directions.html'><span>8 Directions</span></a></li>
<li class='last'><a href='okuri-ashi.html'><span>Okuri-Ashi</span></a></li>
<li class='last'><a href='suri-ashi.html'><span>Suri-Ashi</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='positions.html'><span>Positions</span></a>
<ul>
<li class='last'><a href='moto-dachi.html'><span>Moto-Dachi</span></a></li>
<li class='last'><a href='neko-ashi-dachi.html'><span>Neko-Ashi-Dachi</span></a></li>
<li class='last'><a href='shiko-dachi.html'><span>Shiko-Dachi</span></a></li>
<li class='last'><a href='zenkutsu-dachi.html'><span>Zenkutsu-Dachi</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='active has-sub'><a href='competition.html'><span>Competition</span></a>
<ul>
<li class='last'><a href='Ckata.html'><span>Kata</span></a></li>
<li class='last'><a href='kumite.html'><span>Kumite</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='history.html'><span>History</span></a>
<ul>
<li class='last'><a href='evolution.html'><span>Evolution</span></a></li>
<li class='last'><a href='origins.html'><span>Origins</span></a></li>
<li class='last'><a href='present.html'><span>Present</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='otherstyles.html'><span>Other Styles</span></a>
<ul>
<li class='last'><a href='goju-ryu.html'><span>Goju-Ryu</span></a></li>
<li class='last'><a href='shoto-kam.html'><span>Shoto-Kan</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='philosophy.html'><span>Philosophy</span></a>
<ul>
<li class='last'><a href='inthedojo.html'><span>In the dojo</span></a></li>
<li class='last'><a href='levels.html'><span>Levels</span></a></li>
</ul>
</li>
</ul>
</div>And here it is how it shows now:
I tried adding font-size: to some of the menus but nothing changed. I have also looked at some other questions around here but I can't adapt my code to the solution they recommend.
Any ideas on how to make the font of the texts in the blue squares bigger?
Upvotes: 0
Views: 1366
Answers (1)
Rodney G
Reputation: 4826
If you are changing or adding font-size settings and they are not taking effect, it's because your styles are being overridden by more specific selectors, you've changed the wrong selector, or there's an error in your CSS. Unless you broke the internet. All I had to do was change these two: #cssmenu > ul > li > a and #cssmenu .has-sub ul li a.
Update to address your edited question
To change the font-size of the menu items in blue boxes, you change:
#cssmenu .has-sub ul li a {
font-size: 24px;
}
/* The rest of this is for my embedded example */
@charset "utf-8";
<!-- CSS menu -->
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
line-height: 1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
text-align: center;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
border-bottom: 0px solid #0fa1e0;
width: auto;
position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding: 19px 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
display: inline-block;
float: center;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #000000;
font-size: 24px;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
color: #ffffff;
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
background: -o-linear-gradient(top, #262626 0%, #070707 100%);
background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
font-size: 18px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #0a6d98;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}<div id='cssmenu'>
<ul>
<li class='active has-sub'><a href='techniques.html'><span>Techniques</span></a>
<ul>
<li class='has-sub'><a href='attacks.html'><span>Attacks</span></a>
<ul>
<li class='has-sub'><a href='Aclosehanded.html'><span>Close-Handed</span></a>
<ul>
<li class='last'><a href='gyaku-tsuki.html'><span>Gyaku-Tsuki</span></a></li>
<li class='last'><a href='oi-tsuki.html'><span>Oi-Tsuki</span></a></li>
<li class='last'><a href='uraken.html'><span>Uraken</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Aopenhanded.html'><span>Open-Handed</span></a>
<ul>
<li class='last'><a href='nukite.html'><span>Nukite</span></a></li>
<li class='last'><a href='shotei-uchi.html'><span>Shotei-Uchi</span></a></li>
<li class='last'><a href='shuto-uchi.html'><span>Shuto-Uchi</span></a></li>
<li class='last'><a href='soto-uchi.html'><span>Soto-Uchi</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='legs.html'><span>Leg</span></a>
<ul>
<li class='last'><a href='mae-geri.html'><span>Mae-Geri</span></a></li>
<li class='last'><a href='mawashi-geri.html'><span>Mawashi-Geri</span></a></li>
<li class='last'><a href='ushio-geri.html'><span>Ushio-Geri</span></a></li>
<li class='last'><a href='yoko-geri.html'><span>Yoko-Geri</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='defenses.html'><span>Deffenses</span></a>
<ul>
<li class='has-sub'><a href='Dclosehanded.html'><span>Close-Handed</span></a>
<ul>
<li class='last'><a href='age-uke.html'><span>Age-Uke</span></a></li>
<li class='last'><a href='gedan-uke.html'><span>Gedan-Uke</span></a></li>
<li class='last'><a href='uchi-uke.html'><span>Uchi-Uke</span></a></li>
<li class='last'><a href='yoko-uchi-uke.html'><span>Yoko-Uchi-Uke</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Dopenhanded.html'><span>Open-Handed</span></a>
<ul>
<li class='last'><a href='shuto-uke.html'><span>Shuto-Uke</span></a></li>
<li class='last'><a href='teiso-uke.html'><span>Teisho-Uke</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='defensebasics.html'><span>Deffense Basics</span></a>
<ul>
<li class='last'><a href='#'><span>1</span></a></li>
<li class='last'><a href='#'><span>2</span></a></li>
<li class='last'><a href='#'><span>3</span></a></li>
<li class='last'><a href='#'><span>4</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='katas.html'><span>Katas</span></a>
<ul>
<li class='last'><a href='#'><span>1</span></a></li>
<li class='last'><a href='#'><span>2</span></a></li>
<li class='last'><a href='#'><span>3</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='movements.html'><span>Movements</span></a>
<ul>
<li class='last'><a href='8directions.html'><span>8 Directions</span></a></li>
<li class='last'><a href='okuri-ashi.html'><span>Okuri-Ashi</span></a></li>
<li class='last'><a href='suri-ashi.html'><span>Suri-Ashi</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='positions.html'><span>Positions</span></a>
<ul>
<li class='last'><a href='moto-dachi.html'><span>Moto-Dachi</span></a></li>
<li class='last'><a href='neko-ashi-dachi.html'><span>Neko-Ashi-Dachi</span></a></li>
<li class='last'><a href='shiko-dachi.html'><span>Shiko-Dachi</span></a></li>
<li class='last'><a href='zenkutsu-dachi.html'><span>Zenkutsu-Dachi</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='active has-sub'><a href='competition.html'><span>Competition</span></a>
<ul>
<li class='last'><a href='Ckata.html'><span>Kata</span></a></li>
<li class='last'><a href='kumite.html'><span>Kumite</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='history.html'><span>History</span></a>
<ul>
<li class='last'><a href='evolution.html'><span>Evolution</span></a></li>
<li class='last'><a href='origins.html'><span>Origins</span></a></li>
<li class='last'><a href='present.html'><span>Present</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='otherstyles.html'><span>Other Styles</span></a>
<ul>
<li class='last'><a href='goju-ryu.html'><span>Goju-Ryu</span></a></li>
<li class='last'><a href='shoto-kam.html'><span>Shoto-Kan</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='philosophy.html'><span>Philosophy</span></a>
<ul>
<li class='last'><a href='inthedojo.html'><span>In the dojo</span></a></li>
<li class='last'><a href='levels.html'><span>Levels</span></a></li>
</ul>
</li>
</ul>
</div>Upvotes: 2
Related Questions
- Change font size and weight of text in navigation menu on WordPress
- Changing Menu Bar Font Size
- How do I make my Wordpress website navigation menu font larger and not capital letters?
- Editing font size of navigation bar links in Wordpress?
- Change font and size, CSS
- Font Sizing Issue for Responsive Navigation Menu
- how to change font size on html list using css
- CSS increase font size
- Menu Font Size Not the Same
- problem with font-size using html and css