I did the job by make the submenu functioning, the problem is I can't get the submenu width wider than its parent.
when i hover, its messed up as you can see in fiddle links i provided below
please take a look at this http://jsfiddle.net/wR5L5/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
padding: 0;
}
.navigation ul li {
position: relative;
display: inline;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
there is a flexible menu .sub class http://jsfiddle.net/wR5L5/12/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
position: relative;
padding: 0;
}
.navigation ul li {
display: inline;
position: relative;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
float: left;
width: auto;
min-width: 100%;
background: #999;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
white-space: nowrap;
clear: both;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
display: block;
float: none;
width: 100%;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
Give width to the sub menu to get submenu wider than main menu.
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
width: 150px;
font-size: 13px;
}
Related
I have used text-align: center inside, but .main-nav was not effected. What is the best way to center this navigation?
/***** Navigation *****/
.main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
.main-nav li { float: left; position: relative; }
.main-nav li a { display: block; color: #333131; font-size: 16px; font-size: 1rem; line-height: 1; letter-spacing: 2.7px; padding: 12px 0; margin-right: 30px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
Your nav container should have below property to make it center: I have not tested. if you want exact solution create fiddler or share HTML code as well.
.navContainer{
width:100px; <!-- This value can be any -->
margin: 10px auto; <!-- first value of margin can be any -->
}
I have a vertical menu which I want to make horizontal. I have tried placing display:inline tag but it does not do the job. Please guide. Thanks.
#access div {
margin: 0;
width:140px;
}
#access {
clear: both;
display: block;
float: left;
}
#access ul {
font-size: 11px;
list-style: none;
margin: 0;
padding: 0;
}
#access li {
line-height: normal;
position: relative;
display:inline;
}
#access a {
color: #B25326;
display: block;
padding: 4px 0;
text-decoration: none; font-size: 10px;
text-align:right; text-transform:uppercase;
line-height: normal;
}
#access a:hover {
color: #000000 !important;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #f9f9f9;
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 li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: none;
}
#access li:hover > a,
#access a:focus {
color: #000000;
}
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}
First take the width off from the div and then you can use:
#access li {
float:left;
}
I'm working on a css/html site and I have this problem: in my style.css I got two divs, one for sidebar and one for content. I would like the sidebar to be, well, at the side, but when both are present the content always goes below the sidebar, unless I put that in position:absolute. In that case I have a problem when small screens are used, 'cause they get one over the other.
I paste the code, hope you can help!
/* This is for content */
article, aside, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
#modal {
position: relative;
width: 100%;
display: inline-block;
display: table;
display: table-cell;
float: none;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
text align: center;
background-color: #f2f2f2;
overflow: auto;
}
#modal header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
#modal h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #323232;
text-align: center;
}
#modal section {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
font-size: 12px;
line-height: 175%;
color: #333;
text-align: center;
}
while this is the sidebar
/*sidebar */
#sidebar{
position: static;
margin-top: 15px;
max-width: 150px;
}
#sidebar ul,
#sidebar ul li,
#sidebar ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
top: 5%;
}
#sidebar ul {
position: static;
top: 90px;
z-index: 1000;
}
#sidebar ul li {
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#sidebar ul li.hover,
#sidebar ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#sidebar ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
#sidebar ul ul li {
float: none;
}
#sidebar ul ul ul {
top: 1px;
left: 99%;
}
#sidebar ul li:hover > ul {
visibility: visible;
}
#sidebar ul li {
float: none;
}
#sidebar ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#sidebar {
font-family: 'Lato', sans-serif;
font-size: 18px;
width: 180px;
}
#sidebar ul a,
#sidebar ul a:link,
#sidebar ul a:visited {
display: block;
color: #000000;
text-decoration: none;
font-weight: 300;
}
#sidebar > ul {
float: none;
}
#sidebar ul {
background: #a0a0a0;
}
#sidebar > ul > li {
border-left: 3px solid #000000;
}
#sidebar > ul > li > a {
padding: 10px 20px;
}
#sidebar > ul > li:hover {
border-left: 3px solid #9b1a1c;
}
#sidebar ul li:hover > a {
color: #9b1a1c;
}
#sidebar > ul > li:hover {
background: #f6f6f6;
}
/* Sub Menu */
#sidebar ul ul a:link,
#sidebar ul ul a:visited {
font-weight: 400;
font-size: 14px;
}
#sidebar ul ul {
width: 180px;
background: none;
border-left: 20px solid transparent;
}
#sidebar ul ul a {
padding: 8px 0;
border-bottom: 1px solid #eeeeee;
}
#sidebar ul ul li {
padding: 0 20px;
background: #fff;
}
#sidebar ul ul li:last-child {
border-bottom: 3px solid #000000;
padding-bottom: 10px;
}
#sidebar ul ul li:first-child {
padding-top: 10px;
}
#sidebar ul ul li:last-child > a {
border-bottom: none;
}
#sidebar ul ul li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 13px;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
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've created a drop down menu using css where the drop down appears as a horizontal row instead of a vertical list. My only problem is that the drop down menu does not line up with the rest of menu. I want it to be flush with the left side of the navigation bar.
The page is up at this address: http://concept82.com/CBHweb/index2.html
The code for my drop down menu is:
#navholder{
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
#nav {
margin: 1px;
padding: 0px;
}
#nav li {
list-style: none;
float: left;
}
#nav li a {
display: block;
color: #FFFFFF;
font-size: 14px;
text-align: center;
margin-top: 5px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
width: 140px;
}
#nav li a:hover {
color: #201E30;
}
#nav li ul {
display: none;
}
#nav li ul a{
width: auto;
font-size: 11px;
}
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
#nav li:hover li, #nav li.hover li {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-right: 1px solid #594361;
padding: 0px 15px 0px 15px;
margin-top: 3px;
margin-bottom: 3px;
white-space: nowrap;
}
#nav li.first, #nav li.hover li.first {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-left: 1px solid #594361;
padding: 2px 15px 2px 5px;
margin-top: 3px;
white-space: nowrap;
}
#nav li:hover li a, #nav li.hover li a {
color: #201E30;
background-color: #FFFFFF;
}
#nav li li a:hover {
color: #201E30;
}
Thanks ahead of time!
You should change position of #navholder as relative.
#navholder{
position: relative;
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
When you define the ul when hovering on the list you specify left as 0 px, aligining it to the left of the page, change it to your margin width then it will be in the right place
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}