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;
}
Related
Hi I am having trouble shifting a menu list on my wordpress site to the left. It appears as if there is a margin so when the list contains so many items it appears right offset and no longer centred. The site in question is www.cabinboys.ca the menu I'm talking about is right below the cabinboys image filled with two letter items. If any one could look at my css and see if they could figure out how to shift the list items to the left that would be much appreciated thanks.
/* =Menu
----------------------------------------------- */
#menu {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
margin-bottom: 25px;
padding: 10px;
text-align: right;
width: 800px;
}
#menu img {
margin-bottom: 10px;
}
#menu a {
color: #666;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 0 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu a:hover {
color: #36bcab;
}
#menu ul {
list-style: none;
margin: 0;
padding-left: 30;
}
#menu li {
float: right;
position: relative;
}
#menu ul ul {
display: none;
float: right;
position: absolute;
right: 0;
z-index: 99999;
}
#menu ul ul ul {
right: 100%;
top: 0;
}
#menu ul ul a {
background: #e9e9e9;
border-bottom: 1px solid #e1e1e1;
display: block;
font-size: 14px;
height: auto;
line-height: 1em;
margin: 0 ;
padding: .8em .5em .8em 1em;
width: 130px;
}
#menu ul ul li:last-of-type a {
border-bottom: none;
}
#menu li:hover > a,
#menu ul ul :hover > a {
color: #36bcab;
}
#menu ul ul a:hover {
background: #36bcab;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul li.current_page_item > a,
#menu ul li.current_page_ancestor > a,
#menu ul li.current-menu-item > a {
color: #111;
}
#menu ul:after {
clear: both;
content: ' ';
display: block;
}
You should add a couple of properties to make it work:
#menu-header-menu {
display:table;
margin:0 auto;
padding:0;
}
Nevertheless it's interesting that you say that the shift happened when the number if items in the menu increased, I don't see in the CSS any code that could differentiate the display depending on the number of items. Could you confirm that I understood the situation?
I'm trying to make my website's menu elements next to each other with the display: inline-block. I've tried it in different parts of my CSS menu, like at the 'cssmenu li' etc, but it doesn't work. Somebody knows how to help me?
The CSS:
#cssmenu {
border: none;
border: 0px;
margin: -17px;
padding: 0px 0px 0;
font-family: "Times New Roman", Verdana, Helvetica, sans-serif;
font-size: 19px;
font-weight: none;
float: left;
width: 600;
margin-left: 300px;
z-index: 999;
position: fixed;
}
#cssmenu ul {
background: #fff;
height: 30px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
display: block;
float: left;
padding: 0px;
}
#cssmenu li a {
background: #fff url('seperator.png') bottom right no-repeat;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #000;
}
#cssmenu ul ul a {
color: #000;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #fff url('hover.png') bottom center no-repeat;
color: #ddd;
text-decoration: none;
}
#cssmenu li ul {
display: none;
background: #fff;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;*/
/*left:0px;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('sub_sep.png') bottom left no-repeat;
float: auto;
margin: 0px;
display: block;
padding: 0px;
width: 225px;
background: #hhh url('hover_sub.png') center left no-repeat;
border: 0px;
color: #000;
}
#cssmenu li:hover li a {
background: none;
color: #000;
font: "Times New Roman", Verdana, Helvetica, sans-serif;
font-size: 15px;
text-align: center;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #fff url('hover_sub.png') center left no-repeat;
border: 0px;
color: #000;
text-decoration: none;
}
#cssmenu p {
clear: left;
}
You can make it with #cssmenu li {display: inline block;} and #cssmenu li a {padding: 0 16px;} but your html is wrong. Check your ul's and li's again. You need:
<div id="cssmenu">
<ul>
<li class="has-sub">
<a></a>
...
</li>
<li class="has-sub">
<a></a>
...
</li>
<li class="has-sub">
<a></a>
...
</li>
</ul>
</div>
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;
}
i'm trying to center the navigation tabs on top of a div. basically, I want the navigation centered on top of the div with a 2px stage in between each tab. The nav tabs now don't seem to sit centered on the .row.
any help would be GREATLY APPRECIATED!
.row {
margin: 0 auto;
width: 960px;
}
#top-menu{
font-family: "LeagueGothicRegular",sans-serif;
text-align: center;
margin-top:240px;
}
#top-menu li{
display: block;
float: left;
line-height: 1;
margin: 0 17px;
text-align: center;
}
#top-menu a{
font-family: 'LeagueGothicRegular', sans-serif;
background-color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #000000;
display: inline-block;
font-size: 1.97em;
line-height: 1;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
padding: 6px 18px;
text-decoration: none
}
#top-menu a:hover,
#top-menu .active a{
color: #fff;
background: #E80B44;
}
#top-menu a:hover .nav-arrow{
border-top-color: {{settings.nav_hover_colour}};
}
#top-menu ul .first ul{
left: 0;
}
#top-menu ul ul li{
color: #000000;
display: inline-block;
font-family: 'LeagueGothicRegular', sans-serif;
text-shadow: 1px 1px 1px transparent;
}
#top-menu ul ul {
font-family: 'LeagueGothicRegular', sans-serif;
display: inline-block;
border: none;
text-shadow: 1px 1px 1px transparent;
}
#top-menu > ul > li {
font-family: 'LeagueGothicRegular', sans-serif;
}
Change display: block; of #top-menu li to display: inline-block; and remove float: left;
Add text-align:center; to #top-menu ul
When this is done, your navigation will be centered when you decrease the margins.
I'm having a weird problem with my navigation in IE 6. Only the first and last links of the navigation bounce when hovered over.
Why would this be happening?
My CSS file:
#navigation {
width: 930px;
height: 30px;
background-color: #f1faff;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: 30px;
}
#navigation ul li {
display: inline;
}
#navigation ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #0067b4;
display: inline;
text-decoration: none;
text-transform: uppercase;
padding: 7px 50px;
}
#navigation ul li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #5e5e5e;
display: inline;
text-decoration: none;
text-transform: uppercase;
padding: 7px 50px;
}
#navigation ul li a.first {
padding-left: 8px;
margin: 0px;
overflow: hidden;
border: 0px;
}
#navigation ul li a.last {
padding-right: 8px;
margin: 0px;
overflow: hidden;
border: 0px;
}
The site where this is happening is available at http://www.paysonsecure.com/protekskiracing/
I would add this to your global-ie6.css
#navigation ul { display: inline-block; }
Thanks gutierrezalex!! I had the same problem and it works adding {display: inline-block;} at my styles..it works for any browser:
ul.menu li a{
text-decoration:none;
color:black;
display:block;
padding:0;
margin:0;
display:inline-block;
}
ul.menu li a:hover{
background-color:#5cc2ed;
color:#ffffff;
display:inline-block;
}