I am having an issue with a sub menu. You can see at http://responsiveradio.radiobrandbuilders.com by hovering over the Home link.
The padding does not show up for the sub menu li a items but as soon as you hover over them the padding works.
I'm sure it is something simple I am overlooking but any help would be appreciated.
nav {
height: 60px;
}
nav ul {
list-style: none;
margin-top: 19px;
padding: 0;
}
nav li {
display: inline-block;
margin: 0;
position: relative;
}
nav li a {
color: #000;
font-size: 16px;
font-weight: 500;
padding: 15px;
text-transform: uppercase;
}
nav li:last-child {
margin-right: 0;
}
nav li a:hover {
color: #fff;
cursor: pointer;
}
.sub-menu {
display: none;
left: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.sub-menu li {
display: block;
margin: 0;
padding: 0;
}
.sub-menu li a {
color: #fff;
width: 100%;
}
.sub-menu li a:hover {
background: #fff;
color: #000;
}
Changes in your css to be made... A tag is inline tag ...so you have to make is display block.
nav li a {
color: #000;
font-size: 16px;
font-weight: 500;
padding: 15px;
text-transform: uppercase;
display: block; /*changes done */
}
nav ul {
list-style: none;
padding: 0;
margin-top: 0; /*changes done */
}
.sub-menu{
display: none;
left: 0;
padding: 0;
position: absolute;
top: 52px; /*changes done */
width: 200px;
}
in css
.sub-menu li{
padding:15px;
}
In your css you set padding:0px;
modify your style like
.sub-menu li a {
color: #fff;
width: 100%;
display: inline-block;
}
.sub-menu li a{padding:0}
add this style and refresh your page.
Related
I want to set my drop down menu in the middle of my page. I could make it both left aligned or centered, but now it is not working anymore.
#navigation {
margin-top: -50;
background: #000;
height: 3em;
list-style: none;
position: center;
color: #fff;
font-family: Arial;
font-size: 14px;
z-index: +1;
}
#navigation > li {
position: relative;
left:15%;
display: inline;
height: 100%;
margin-right: 0.5em;
padding: 0 1cm 0 1cm;
z-index: 2;
}
#navigation > li > a {
position: relative;
left:15%;
display: inline;
height: 100%;
color: #c60;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
#navigation > li > a:hover {
color: orange;
text-decoration: underline;
display: inline;
}
#navigation > li.sub {
position: relative;
display: inline;
}
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
left:50%;
display: inline;
top: -1000em;
z-index: +2;
}
#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
display: inline;
z-index: +2;
}
#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#navigation > li.sub ul li a:hover {
background: #c60;
text-decoration: underline;
display: inline;
}
#navigation > li.sub:hover ul {
top: 3em;
z-index: +2;
}
This code used to make the menu centered but it's not working anymore.
Since you haven't provided a snippet of the HTML code for your navigation dropdown, I went ahead and did some detective work to figure it out. So given that the HTML structure is something like this:
<ul id="navigation">
<li class="sub">
<a>option</a>
<ul>
<li><a>sub-option</a></li>
<li><a>sub-option</a></li>
</ul>
</li>
<li class="sub">
<a>option</a>
<ul>
<li><a>sub-option</a></li>
<li><a>sub-option</a></li>
</ul>
</li>
<li>
<a>lonely option</a>
</li>
</ul>
I noticed that there were a few problems in your CSS, I've added comments below to discuss these. So this is your current CSS:
#navigation {
margin-top: -50; /* <-- missing measurement unit, px? em? */
background: #000;
height: 3em;
list-style: none;
position: center; /* <-- no such thing as 'center' */
color: #fff;
font-family: Arial;
font-size: 14px;
z-index: +1; /* <-- not a big deal but you can leave out the plus for positive integers. */
}
#navigation > li {
position: relative;
left:15%; /* <-- this one ... */
display: inline;
height: 100%;
margin-right: 0.5em;
padding: 0 1cm 0 1cm;
z-index: 2;
}
#navigation > li > a {
position: relative;
left:15%; /* <-- ... and this were the ones causing you grief */
display: inline;
height: 100%;
color: #c60;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
#navigation > li > a:hover {
color: orange;
text-decoration: underline;
display: inline;
}
#navigation > li.sub {
position: relative;
display: inline;
}
#navigation > li.sub ul {
width: 10em;
margin: 0;
padding: 0.5em 0;
list-style: none;
background: #a40;
position: absolute;
left:50%;
display: inline;
top: -1000em;
z-index: +2;
}
#navigation > li.sub ul li {
width: 90%;
margin: 0 auto 0.3em auto;
display: inline;
z-index: +2;
}
#navigation > li.sub ul li a {
height: 100%;
display: block;
padding: 0.4em;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#navigation > li.sub ul li a:hover {
background: #c60;
text-decoration: underline;
display: inline;
}
#navigation > li.sub:hover ul {
top: 3em;
z-index: +2;
}
This is the current state of the navigation dropdown. Before I could solve your issue, I had to fix the following problems:
Removed the rule position: center; from #navigation {} as it is
not a valid rule and wasn't doing anything
Removed the rule left: 15% from #navigation > li {} and #navigation > li > a. Using these two rules to try and center was not only not truly centering the dropdown but causing it to break as well.
Removed the rule margin-top: -50; as it was not doing anything
Changed display: inline; to display: inline-block; in #navigation > li {}. This way height: 100%; would make the height of the li element the same height as the navigation bar.
Now with all that out of the way - all you need to do is, instead of using position: center you need to use text-align: center in #navigation {}. That will center your navigation.
Finally, here is the updated and working navigation dropdown demo and code.
For my website (www.heretoedit.com) I want to move the text in my navbar so that the "about" button is lined up with the rest of my website's text but the "contact" button stays put. Plus I want to stop the text for the "extras" and "contact" buttons from moving down when the screen size gets reduced.
Below is my navbar code, any help would be much appreciated. Thanks.
#navbar {
background-color: #0299EB;
font-family: Verdana, Geneva, sans-serif;
color: white;
font-weight: bold;
position: absolute;
width: 1000px;
min-width: 100%;
height: 70px;
top: 150px;
left: 0px;
}
#navbar ul {
list-style:none;
display:inline-block;
margin-left: 130px;
margin-top: 25px;
}
#navbar li {
float:left;
padding: 0 9px;
text-align:center;
left: 0px;
}
#navbar a:link {
padding: 0 30px;
text-decoration: none;
color: #FFF;
}
#navbar a:hover {
color: black;
text-decoration: none;
}
#navbar a:visited {
color: #FFF;
padding: 0 20px;
text-decoration: none;
}
#navbar ul {
list-style: none;
display: inline-block;
/* Add these */
margin: 25px 0px;
padding: 0;
width: 100%;
text-align: center;
}
#navbar li {
/* float: left; // Remove this */
padding: 0 9px;
text-align: center;
left: 0px;
display: inline-block; /* Add this */
}
I am looking to use navigation pills on my website, but they are resulting in a background leak. See the effect on this website: http://oleb.net/blog/2011/12/tutorial-how-to-sort-and-group-uitableview-by-date/. Hover over the pills multiple times to see the issue. You can see the outline of the pills appear.
Here is the code that I tried:
.navigation-main {
border-top: 1px solid rgba(0,0,0,0.1);
padding-top: 5px;
clear: both;
display: block;
font: 700 13px/1.3076923076 Lato, sans-serif;
letter-spacing: .05em;
text-transform: uppercase;
width: 100%;
}
.navigation-main .menu {
max-width: 1272px;
margin: 0 auto;
}
.navigation-main ul {
list-style: none;
margin: 0;
padding-left: 0;
text-align: center;
}
.navigation-main li {
display: inline-block;
position: relative;
width: 100px;
}
.navigation-main li:after {
content: none;
display: block;
font-size: 11px;
margin-top: -4px;
vertical-align: middle;
}
.navigation-main li:last-child:after {
content: none;
}
.navigation-main a {
display: block;
line-height: 2.6153846153;
padding: 0 10px;
text-decoration: none;
white-space: nowrap;
}
.navigation-main ul ul {
background-color: #000;
display: none;
float: left;
position: absolute;
top: 2.6153846153em;
left: 0;
text-align: left;
z-index: 99999;
}
.navigation-main li li {
display: block;
}
.navigation-main li li:after {
content: "";
display: block;
margin: 0;
}
.navigation-main ul ul ul {
left: 100%;
top: 0;
}
.navigation-main ul ul a {
color: #fff;
line-height: 1.3076923076;
padding: .6153846153em 10px .6923076923em;
white-space: normal;
width: 170px;
}
.navigation-main ul ul a:hover {
background-color: #333;
color: #fff;
}
.navigation-main ul li:hover > ul {
display: block;
}
/* This is where the pill happens */
.navigation-main a:hover,
.navigation-main li.current_page_item > a,
.navigation-main li.current-menu-item > a {
border-radius: 4px;
color: #FFFFFF;
background-color: #000;
}
How do I stop the outline from appearing? Thanks!
Edit:
Code tried:
.navigation-main li {
display: inline-block;
position: relative;
border-radius: 6px;
width: 100px;
.navigation-main a:hover,
.navigation-main li.current_page_item > a,
.navigation-main li.current-menu-item > a {
border-radius: 4px;
color: #FFFFFF;
background-color: #000;
background-clip: padding-box;
}
Try adding this to your css:
background-clip: padding-box;
Add it to any item using border-radius.
Here is exactly what you need to write change for your example. Tried and verified.
body > header nav li a:hover {
color: white;
background-color: #0a6abf;
background-clip: padding-box;
}
with background-clip
without background-clip
I'm using the twentyeleven theme for wordpress 3.4.2. The default theme menu shows a dropdown on hover. What I'd like to do is have the current menu item's submenu displayed. What I've achieved thus far is diplaying the submenu by setting the css property display:visible.
This link, http://www.gq.com shows an example of what I'm trying to achieve.
The related CSS styles are as follows:
#access {
clear: both;
display: block;
float: left;
margin: 0px auto 15px;
width: 100%;
height: 36px;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2.8em;
padding: 0 1.2125em;
}
#access ul ul {
display: none;
float: left;
margin: 0;
position: absolute;
top: 2.9em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access ul li:hover>ul {
display: block;
}
So basically I need to produce a menu like this in Wordpress:
Where the red bar is the width of the page and not fixed so can shrink with resize.
And the submenu is centred
I currently have:
And the CSS is:
#access {
clear: both;
display: block;
margin: 0 auto -10px;
width: 100%;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
margin-top: 0.3em;
padding-left: 0;
display:inline-block;
/*Font*/
letter-spacing:1px;
text-transform:uppercase;
color: #FFF;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 2.333em;
margin: 0 1.2125em;
margin-bottom: 0.5em;
padding-top: 0.5em;
text-decoration: none;
/* Same colour as background */
border-bottom: 1px solid #000;
}
#access ul ul {
display: none;
position: inherit;
top: 0; left: 0;
margin: 0 auto;
width: 100%;
z-index: 9999;
float: left;
}
#access ul ul a {
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
display: inline-block;
}
#access ul ul li {
display: inline-block;
}
Any help
Check this jsfiddle created for you
I had defined a new division sub-menu-bg after the menu code and given a red background to it. Also i had edited your CSS to achieve correct horizontal drop-down menu.
Hope this will solve your problem.